@charset "utf-8";
/* CSS Document */

* { position:relative;}
html { height:100%; }
body {height:100%; margin:0;}
input,button { margin:0; outline:none; color:#4f5964; font-family:'Noto Sans KR', 'malgun gothic', 'arial', 'verdana', sans-serif; }
img { border:0 none; vertical-align:top; }
hr,caption,legend  { display:none; }
address { font-style:normal; }
article,aside,canvas,details,footer,header,hgroup,menu,nav,section,summary,address {  display:block; }

.login_body { margin: 0px; padding: 0px; height: 100%; z-index: 10; }
.login_wrapper{width:100%; height:100%; min-height:600px; overflow:hidden;}
/* .login_layout { position: absolute; top: 50%; left: 50%; width: 500px; height: 540px; margin: -300px 0px 0px -250px; padding: 0px; } */


/* .login_form { width: 500px; height: 540px; padding: 0px; background: #FFF; border-radius: 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px; box-shadow: 0px 0px 10px rgba(132,146,153,0.75); font-family: Malgun Gothic,"맑은 고딕", Arial, sans-serif; z-index:10;} */
.login_form .title{width:173px; height:66px; margin:62px auto 30px; padding:0;}

.login_form form { width: 340px; margin: 0px auto 24px; padding: 0 }
.login_form form fieldset {margin:0; padding:0; border:0; clear:both;}
.login_form legend {visibility:hidden; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0}

.txt_form{width:220px; float:left;}

/* .logo{width:288px; height:38px; margin:70px auto 56px; text-align:center;} */
/* .id { width: 306px; height: 55px; margin: 0px auto 15px auto; padding: 0px 0px 0px 0px; background: url(/images/kr/login/input_bg_id.png) #96a4aa 14px center no-repeat; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } */
/* .pw { width: 306px; height: 55px; margin: 0px auto 25px auto; padding: 0px 0px 0px 0px; background: url(/images/kr/login/input_bg_pw.png) #96a4aa 14px center no-repeat; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } */
/* .otp { width: 306px; height: 55px; margin: 0px auto 18px auto; padding: 0px 0px 0px 0px; background: url(/images/kr/login/input_bg_otp.png) #96a4aa 14px center no-repeat; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } */
.btn_login  { margin:0px; padding:0px; }
.login_form .btn_login { display: block; width: 306px; height: 65px; line-height: 65px; margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; background: #1543a9; text-align: center; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-sizing: border-box; cursor: pointer; font-size: 24px; color: #fff; }
.login_form .btn_login:hover { background: #0e2e74; }
.login_form .btn_login:active { background: #0e2e74; }

/* #uid { background: url(/images/kr/login/txt_id.gif) no-repeat 0px 20px; width: 215px; height: 54px; margin: 0px 0px 0px 55px; padding: 0px 5px 0px 5px; color: #ffffff; font-size: 18px; border: 0px solid #fff; border-radius: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } */
/* #upw { background: url(/images/kr/login/txt_pw.gif) no-repeat 0px 20px; width: 215px; height: 54px; margin: 0px 0px 0px 55px; padding: 0px 5px 0px 5px; color: #ffffff; font-size: 18px; border: 0px solid #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } */
/* #uotp { background: url(/images/kr/login/txt_otp.gif) no-repeat 0px 20px; width: 215px; height: 54px; margin: 0px 0px 0px 55px; padding: 0px 5px 0px 5px; color: #ffffff; font-size: 18px; border: 0px solid #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } */

/* .input_text.focus, */
/* .input_text.focusnot { background: #96a4aa !important; } */

.saveid {float:left; margin: 20px 18px 0px 18px; padding: 0px; }
.saveid input[type="checkbox"] {display:none;}
.saveid input[type="checkbox"] + label {display:inline-block; color:#595757; font-size:16px; cursor:pointer; vertical-align:top;}
.saveid input[type="checkbox"] + label span {display:inline-block;width:27px;height:28px;margin:-5px 10px 0 0;vertical-align:middle;background:url(/images/kr/login/bg_check.svg) left top no-repeat;cursor:pointer;}
.saveid input[type="checkbox"]:checked + label span {background:url(/images/kr/login/bg_check.svg) -34px top no-repeat;}

.btnBox{clear:both; overflow:hidden;}

.btn_password_reset{float:right; margin:20px 18px 0px 0px; cursor:pointer;}
.btn_password_reset > span{display:inline-block; height:24px; line-height:22px; padding-left:28px; font-size:15px; color:#595757; background:url(../images/kr/login/icon_password_reset.png) left top no-repeat;}

.address {clear:both; padding-top:55px; color: #aaaaaa; font-size: 12px; text-align:center; overflow:hidden;}

.login_formBg { position: absolute; left: 50%; top: 50%; width: 900px; height: 815px; margin: -274px 0px 0px -250px; background: url(/images/kr/login/bg_loginform.png) no-repeat left top; overflow: hidden; z-index: 1; }

footer{font-size:14px; color:#c3c3c3; display: none; }
footer p{margin:18px 0px 0px 0px; padding:0px; text-align:center;}

/* 20200319 default_kr.css에 있는 코드 옮김 */
p, strong, h3, div {
	font-family: 'Noto Sans KR', 'malgun gothic', 'arial', 'verdana', sans-serif;
}

input {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
	border:1px solid #dedede;
	font-size:12px;
	color: #393939;
	text-decoration: none;
	ime-mode:active;
}
input[type=checkbox] {
	border:0 !important;
}
input[type=text] {
	height:24px;
}


label, textarea, select, ul, li, h1, h2, table, th, .page, .point, .box, .box2, .nobox, .leftbody, .message, .mainbody,  .listview2 td,.content td, .file td, .file2 td, .txt, .imgbtn{
	font-family: 'Noto Sans KR', 'malgun gothic', 'arial', 'verdana', sans-serif;
	font-size:12px;
	color: #393939;
	text-decoration: none;
	ime-mode:active;
}

span {
	font-size:12px;
	font-family: 'Noto Sans KR', 'malgun gothic', 'arial', 'verdana', sans-serif;
	text-decoration: none;}

#close {
	position: absolute;
    right: 10px;
    top: 8px;
    height: 35px;
    z-index:1000;
}
#close ul {margin: 0; padding: 0;}
#close ul li span {
	display:inline-block;
	width:25px;
	height:28px;
	background-image: url('../images/close_xBtn.png');
	background-repeat: no-repeat;
	background-position: 4px 6px;
}
#close ul li {
	display: block;
	float:left;
	margin:0 3px 0 0px;
	height:28px;
	padding:0px 0px 0px 0px;
	vertical-align:top;
	cursor:pointer;
	vertical-align:middle
}

a{
	font-family: 'Noto Sans KR', 'malgun gothic', 'arial', 'verdana', sans-serif;
	color: #393939;
	text-decoration: none;
	ime-mode:active;
	cursor:pointer;
}

.btnpositionLayer {
	text-align: center;
	margin: -9px;
	margin-top:0px;
	padding:7px;
	border-top: 1px solid #eee;
	background-color: #fcfcfc;
}
.btnpositionLayer a.imgbtn {
    border: 1px solid #c3c3c3;
    height: 24px;
}
.btnpositionLayer a.imgbtn span {
    height: 24px;
    line-height: 24px;
    font-weight: bold;
    font-size: 12px;
    color: #000;
}

.imgbtn{
	white-space:nowrap;
	display:inline-block;
	/* background:url('/images/kr/cm/btn_middle_left.gif') top left; */
	background-repeat:no-repeat;
	cursor: pointer;
	height:20px;
	padding-left:12px;
	vertical-align:top;
	cursor:pointer;
	margin-bottom:2px;
	border:1px solid #ccc;
	background-color: white;
}
.imgbtn span{
	display:inline-block;
	/* background:url('/images/kr/cm/btn_middle_right.gif') top right; */
	background-repeat:no-repeat;
	height:20px;
	padding-right:12px;
	font:12px;
	letter-spacing:-1;
	vertical-align:top;
	line-height:18px;
}
.mainlist{table-layout:fixed; border:0 none !important;font-family:'Noto Sans KR', 'malgun gothic', 'arial', 'verdana', sans-serif;font-size:12px; border-spacing:0; border-collapse:collapse;}
.mainlist tr{height:34px}
.mainlist tr th{text-align:left;border:0px;text-decoration:none; font-weight:normal; color:#333; font-size:12px; padding:5px 4px; border-top:1px solid #e2e3e6;border-bottom:1px solid #e2e3e6; background-color: #f1f3f5; height:21px}
.mainlist tr th.title{width:100%; text-align:left;}
.mainlist tr td{padding:4px 4px 4px 4px; border:0px; font-weight:normal; font-size:12px; color:#5b5a5a; border-bottom:1px solid #eaeaea; border-spacing:0; word-break:break-all;}
.mainlist tr td.title{width:100%; text-align:left; color:#5b5a5a;}
.mainlist tr td.title span{width:95%; display:inline-block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; border:0px;}

#qr img{width: 140px; margin: 18px 0px 28px; border: 1px solid #eaeaea}

/* 20230906 자바업그레이드 로그인 CSS */
.login_wrapper{overflow: hidden; min-width: 1136px;}
.login_backImg{float: left; background: url(/images/kr/login/login_img1.png) no-repeat; width: 630px; height: 100%; background-size: cover}
.right_wrap{width: calc(100% - 630px); height: 100%; float: right;  background: #fff; box-shadow: -6px 0px 15px rgba(0,0,0,0.3);}
.login_form{width: 100%;height: 100%;}
.login_layout{width: 490px; height: 470px; position: absolute;left: 50%; top: 50%; margin-top: -235px; margin-left: -225px;}
.logo{ margin:0px auto 56px; text-align:center;}
.id{width: 100%; height: 55px; margin: 0px; border-radius: 5px;}
.pw{width: 100%; height: 55px; margin: 0px; border-radius: 5px;}
.id_txt, .pw_txt{font-size: 16px; margin-bottom: 10px;}

.input_text.focus,
.input_text.focusnot { border: 1px solid #181818 !important; }

#uid { width: 100%; height: 57px; font-size: 18px; border:1px solid #E4E4E4; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding-left: 15px; }
#upw { width: 100%; height: 57px; font-size: 18px; border:1px solid #E4E4E4; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding-left: 15px;}
.btn_login  { margin:0px; padding:0px; }
.login_form .btn_login { display: block; width: 100%; height: 60px; line-height: 60px; margin: 24px auto 0px auto; padding: 0px 0px 0px 0px; background: #002462; text-align: center; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-sizing: border-box; cursor: pointer; color: #fff; font-weight: bold;}
.login_form .btn_login:hover { background: #0e2e74; }
.login_form .btn_login:active { background: #0e2e74; }
.login_form form{width: 490px;}
.saveid {margin: 20px 18px 0px 0px;}
.saveid input[type="checkbox"] + label{color: #555; letter-spacing: -1px;}
.saveid input[type="checkbox"] + label span {margin: 1px 5px 0 0;}
.login_form form fieldset{padding: 0 20px;}
.id, .pw{cursor: pointer;}
.id input::placeholder{color: #B8B8B8; font-size: 16px; cursor: pointer;}
.pw input::placeholder{color: #B8B8B8; font-size: 16px;}
.btnBox{overflow: hidden; margin-top: 28px;}
.btnBox p.saveid{float: left; margin: 0;}
.btnBox p.find_pw{float: right; margin: 0; color: #555555; text-decoration: underline;}
.copy{position: absolute; bottom: 0px; width: 100%; height: 60px; line-height: 60px; background: #F6F6F6; text-align: center;}
.copy p{font-size: 13px; color: #BABABA; margin: 0px;}

.id .btnClear{position: absolute; top: 0; right: 0; width: 37px; height: inherit; background: url(/images/kr/login/input_icon.svg) center right 17px no-repeat; background-size: 50%; border: none; outline: none; cursor: pointer; }
.pw .btnClear{position: absolute; top: 0; right: 0; width: 37px; height: inherit; background: url(/images/kr/login/input_icon.svg) center right 17px no-repeat; background-size: 50%; border: none; outline: none; cursor: pointer; }

@media only screen and (max-width : 740px){
	.login_backImg{display: none;}
	.login_wrapper{min-width: 630px;}
	.right_wrap{width: 100%;}
}
@media only screen and (min-width : 1920px){
	.login_backImg{min-width:630px; width:30%;}
	.right_wrap{max-width:calc(100% - 630px); width:70%;}
}

*::-webkit-scrollbar {
    width: 12px;
    height: 11px;
}

*::-webkit-scrollbar-thumb {
    background: #dedede;
    border-radius: 8px;
    background-clip: padding-box;
    border: 2px solid transparent;
}

*::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* 비밀번호 만료팝업창*/
.imgbtn span{padding-right: 0px;}
.imgbtn{padding-left: 0px;}
.btnpositionLayer a.imgbtn{height: 25px; padding: 7px 20px; border-radius: 3px;}
.btnpositionLayer a.imgbtn span{font-weight:500; font-size:14px;}
.btnpositionLayer a.imgbtn.ok{border-color:#002462; background:#002462;}
.btnpositionLayer a.imgbtn.ok span{color:#fff;}
.btnpositionLayer a.imgbtn:hover{border-color:#002462;}
.btnpositionLayer a.imgbtn:hover span{color:#002462;}
.btnpositionLayer a.imgbtn.ok:hover{background:#0e2e74; border-color:#0e2e74;}
.btnpositionLayer a.imgbtn.ok:hover span{color:#fff;}

/* 20230906 자바업그레이드 로그인 CSS */

/* 20231120 로그인 OTP영역 추가 */
.otp_txt{font-size: 16px; margin-bottom: 10px;}
.otp{width: 100%; height: 55px; margin: 0px; border-radius: 5px; border: 1px solid #E4E4E4; cursor: pointer;}
#uotp{width: 100%; height: 55px; font-size: 18px; border: 0px solid #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding-left: 15px;}
.otp input::placeholder{color: #B8B8B8 !important; font-size: 16px; font-weight: 500 !important;}
.otp .btnClear{position: absolute; top: 0; right: 0; width: 37px; height: inherit; background: url(../images/kr/login/input_icon.svg) center right 17px no-repeat; background-size: 50%; border: none; outline: none; cursor: pointer;}
.login_layout { width: 490px; height: 544px; position: absolute; left: 50%; top: 50%; margin-top: -272px; margin-left: -245px;}
.logo {margin: 0px auto 44px;text-align: center;}

@media only screen and (max-height : 762px){
.id, .pw, .otp{height: 50px;}
#uid, #upw, #uotp{height: 50px !important;}
.pw_txt, .id_txt, .otp_txt{margin-top: 8px;}
.login_form .btn_login{height: 55px; line-height: 55px; margin: 20px auto 0px auto;}
.btnBox{margin-top: 17px;}
.logo{margin: 0px auto 34px;}
}
/* //20231120 로그인 OTP영역 추가 */


/* 비밀번호 변경 */
.password_change{ margin:0 auto; padding:0px; width:470px;}
.password_change .passwordTitle{ margin:0px; padding:0px; display:flex; justify-content:center; align-items:center;}
.password_change .passwordTitle .password_lock{display:inline-block; width:38px; height:50px; background:url(../images/kr/login/login_lock.svg) no-repeat center / 35px 50px; margin-right:20px;}
.password_change .passwordTitle .tit_01{margin:0; padding:0; font-size:15px; color:#333; letter-spacing:-0.5px; border:none;}
.password_change .passwordTitle .tit_02{margin:0; padding:0; font-size:21px; color:#333; letter-spacing:-0.5px; border:none;}
.password_change .passwordTitle .tit_02 span{font-size:21px; font-weight:bold; color:#3A8DE9;}
.password_change .passwordForm{ margin:15px 0px 0px; padding:8px 5px; list-style:none;}
.password_change .passwordForm li{ margin:0px 0px 14px 0px; padding:0px 15px 0px; font-size:13px; clear:both; overflow:hidden;}
.password_change .passwordForm li .formText{ display:inline-block; line-height:35px; font-size:14px; font-weight: bold;}
.password_change .passwordForm li .formID{ display:inline-block; font-weight:bold;font-size:13px; float:right; width:240px; height:35px; line-height:35px; border:1px solid #d9d9d9; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; text-align:center; box-sizing:border-box;}
.password_change .passwordForm li .formInput{ display:inline-block; float:right; font-size:13px;}
.password_change .passwordForm li .formInput input{font-size:13px; width:240px; height:35px; line-height:35px; border:1px solid #d9d9d9; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; padding:0px 0px 0px 5px;}
.password_change .passwordForm li .formInput input:focus{border:1px solid #181818;}
.password_change .passwordForm li.grayText{ color:#8e8e8e; font-size:12px; margin:0px; padding:0px}
.password_change p{font-weight: bold;}
.password_change p span{font-size:13px;line-height: 18px;display: inline-block; font-weight:500;}
.password_change p span:nth-child(2){margin-top: 5px;}
#exDiv3 dl{margin-top: 20px;}
.warning_wrap .layerTitle{margin-bottom: 20px;}
.modal{max-width: 600px !important;}


/* 비밀번호 초기화 */
.password_reset .login_wrapper{overflow:hidden; min-height:100%; height:auto;}
.password_reset .login_wrapper .login_backImg{position:absolute; top:0; bottom:0; left:0; }
.password_reset .right_wrap{padding:70px 0; box-sizing:border-box; min-height:100vh; height:auto; display:flex; flex-direction:column; justify-content:center;}
.password_reset .right_wrap .login_layout{position:static; margin:0 auto; height:auto;}
.password_reset .right_wrap .login_layout .logo{font-size:30px; font-weight:500; margin-bottom:35px;}
.password_reset .right_wrap .login_layout .input_wrap{margin:0; margin-top:15px;}
.password_reset .right_wrap .login_layout .input_wrap input{border:none; width:100%; height:57px; line-height:57px; font-size:18px; padding:0 40px 0 15px; border-radius:5px; border:1px solid #E4E4E4;}
.password_reset .right_wrap .login_layout .input_wrap input:focus{border:1px solid #181818;}
.password_reset .right_wrap .login_layout .input_wrap input::placeholder{color: #B8B8B8; font-size: 16px;}
.password_reset .right_wrap .login_layout .input_wrap .btnClear{width:24px; height:24px; background:url(../images/kr/login/input_icon.svg) no-repeat center; background-size:20px 20px; position:absolute; top:16px; right:10px; cursor:pointer; display:none;}
.password_reset .right_wrap .login_layout .input_wrap input.focus + .btnClear{display:block;}
.error_mes{color:#ff8384; font-size:12px; margin-top:7px;}
.password_reset .right_wrap .login_layout .newBtn{list-style:none; overflow:hidden; padding:0; margin:15px 0 0;}
.password_reset .right_wrap .login_layout .newBtn li{width:calc(50% - 10px); height:60px; line-height:58px; border:1px solid #e4e4e4; border-radius:5px; margin:0; padding:0; text-align:center; font-size:20px; font-weight:500; float:left; margin-left:20px; box-sizing:border-box; cursor:pointer;}
.password_reset .right_wrap .login_layout .newBtn li.ok{margin:0; border-color:#002462; background:#002462; color:#fff;}
.password_reset .right_wrap .login_layout .newBtn li:hover{border-color:#002462; color:#002462;}
.password_reset .right_wrap .login_layout .newBtn li.ok:hover{border-color:#0e2e74; background:#0e2e74; color:#fff;}


.password_reset .right_wrap .login_img{width:490px; margin:0 auto; padding:0 20px; box-sizing:border-box;}
.password_reset .right_wrap .login_img .img_title{font-size:20px; font-weight:500; margin-bottom:10px;}
.password_reset .right_wrap .login_img ol{margin:0; padding:0 0 0 18px;}
.password_reset .right_wrap .login_img ol li{font-size:16px; line-height:30px; letter-spacing:-0.5px;}
.password_reset .right_wrap .login_img .img_title2{font-size:20px; font-weight:500; margin:30px 0 10px;}
.password_reset .right_wrap .login_img dl{margin:0;}
.password_reset .right_wrap .login_img dl dt{font-size:18px; font-weight:500; line-height:34px;}
.password_reset .right_wrap .login_img dl dd{margin:0; padding:0; font-size:16px; line-height:30px;}

.confirmBox{margin-top:15px;}
.confirmBox:after{content:""; display:block; clear:both;}
.confirmBox .input_wrap{float:left; margin:0 !important; width:calc(100% - 100px);}
.confirmBox .btn{float:right; margin:0; width:80px; height:57px; line-height:57px; border-radius:5px; background:#002462; text-align:center; color:#fff; font-size:18px; cursor:pointer;}
.confirmBox .btn:hover{background:#0e2e74;}