@charset "UTF-8";
@import "fonts.css";
html, body{width:100%;height:100%;font-family:'HanwhaGothic', '맑은 고딕', 'malgun gothic', sans-serif !important;font-size:12px;line-height:1.5;font-weight:400;}
button, a, input, textarea, select {outline:0 !important;}
button{margin:0;padding:0;border:none;}
button:active{margin:0;}
h1, h2, h3, h4, h5, h6{margin:0;}
ul, li, ol, dl, dt, dd, p {margin:0;padding:0;}
li{list-style:none;}
/* scroll - webkit */
::-webkit-scrollbar{width: 8px; height: 8px;}
::-webkit-scrollbar-track{background-color: rgba(0,0,0, .1); }
::-webkit-scrollbar-thumb{background-color: rgba(0,0,0, .2); }
::-webkit-scrollbar-corner{background-color: rgba(0,0,0, .5); }
/* 로그인화면 */
body.hsp-login3 .wrap-login{display:table;width:100%;height:100%;min-width:1200px}
body.hsp-login3 .visual-area{display:table-cell;position:relative;}
/*body.hsp-login3 .visual-area h1{position:absolute;top:40px;left:40px;width:180px;height:40px;background:url(../images/login/logo_hw.png) no-repeat;overflow:hidden;text-indent:-10000px;}*/
/*body.hsp-login3 .visual-area h1{position:absolute;top:40px;left:40px;width:180px;height:40px;background:url(../images/login/logo_hw_black.png) no-repeat;overflow:hidden;text-indent:-10000px;} SR250924_00037 이미지 변경 건, 로고 임시 제거*/
body.hsp-login3 .visual-area h1{position:absolute;top:40px;left:40px;width:180px;height:40px;overflow:hidden;text-indent:-10000px;}
body.hsp-login3 .visual-area.bg1{background:url(../images/login/bg_leftside.png?version=260303) no-repeat 50% 0;background-size:cover;}
body.hsp-login3 .visual-area.bg1 > p {width:0;height:0;overflow:hidden;}
body.hsp-login3 .cont-area{display:table-cell;position:relative;width:600px;padding:40px 0;vertical-align:middle;background-color:#fff;}
body.hsp-login3 header h2{width:421px;height:33px;margin:0 auto;background:url(../images/login/logo_hsp.png) no-repeat;overflow:hidden;text-indent: -10000px;}
body.hsp-login3 main{padding:33px 90px 23px;}

body.hsp-login3 .login-area .outbox {position:relative;width:100%;height:50px;}
body.hsp-login3 .login-area .outbox + .outbox {margin-top:19px;}
body.hsp-login3 .login-area .outbox input {width:100%;height:50px;padding:0 10px;border-width:0 0 1px 0;border-style:solid;border-color:#d5d5d5;background-color:transparent;font-size:15px;vertical-align:middle;box-sizing:border-box;outline:none}
body.hsp-login3 .login-area .outbox label {position:absolute;top:14px;left:10px;color:#b0b0b0;font-size:15px;font-weight:400;opacity:1;transform:translateY(0);transition:0.4s;pointer-events:none;}
body.hsp-login3 .login-area .outbox input[type="text"]:focus,
body.hsp-login3 .login-area .outbox input[type="password"]:focus {border-color:#ff5e31;}
body.hsp-login3 .login-area .outbox.existence label {opacity:0;transform:translateY(-10px);}

body.hsp-login3 .login-area .outbox .inp_del {display:inline-block;position:absolute;right:0;bottom:0;width:38px;height:50px;margin:0;padding:0;background:transparent;opacity:0;transform:translateY(10px);transition:0.4s}
body.hsp-login3 .login-area .outbox .inp_del:before,
body.hsp-login3 .login-area .outbox .inp_del:after {content:'';position:absolute;top:50%;left:50%;width:14px;height:1px;margin:0 0 0 -7px;background-color:#444;}
body.hsp-login3 .login-area .outbox .inp_del:before {transform:rotate(-45deg)}
body.hsp-login3 .login-area .outbox .inp_del:after {transform:rotate(45deg)}
body.hsp-login3 .login-area .outbox.existence input:focus ~ .inp_del {opacity:1;transform:translateY(0)}

body.hsp-login3 .login-area .msg {margin:5px 0;font-weight:500;color:#000;}
body.hsp-login3 .login-area .check {display:inline-block;position:relative;margin-top:19px;z-index:1;vertical-align: middle;}
body.hsp-login3 .login-area .check input[type="checkbox"]{position:absolute;width:0;height:0;opacity:0;}
body.hsp-login3 .login-area .check input[type="checkbox"] + label {margin:0;line-height:19px;font-size:12px;font-weight:300;color:#030303;cursor:pointer;}
body.hsp-login3 .login-area .check input[type="checkbox"] + label:before {content:'';display:inline-block;width:19px;height:19px;margin-right:4px;background: url(../images/login/ic_chk.png) no-repeat 0 -20px;vertical-align:middle;}
body.hsp-login3 .login-area .check input[type="checkbox"]:checked + label:before {background-position:0 0;}

body.hsp-login3 .login-btn button {display:block;width:100%;height:53px;margin:19px 0 0;padding:0;font-size:15px;border-radius:5px;opacity:1;}
body.hsp-login3 .login-btn button + button {margin-top:10px;}
body.hsp-login3 .login-btn button.c1 {font-weight:300;color:#fff;background-color:#f2572c;}
body.hsp-login3 .login-btn button.c2 {font-weight:500;color:#000;background-color:#fff;border:1px solid #d0d0d0;}
body.hsp-login3 .login-btn button.c1:hover,
body.hsp-login3 .login-btn button.c1:focus {background-color:#e55329;}
body.hsp-login3 .login-btn button.c2:hover,
body.hsp-login3 .login-btn button.c2:focus {background-color:#f2f2f2;border-color:#c5c5c5;}

body.hsp-login3 aside.side-button {margin-top:22px;}
body.hsp-login3 aside.side-button ul {display:flex;}
body.hsp-login3 aside.side-button ul li {flex:1 1 auto;position:relative;text-align:center;}
body.hsp-login3 aside.side-button li a {display:inline-block;padding:6px 0 4px;font-weight:500;color:#4a4a4a;}
body.hsp-login3 aside.side-button li + li:before {content:'';position:absolute;top:50%;left:0;width:2px;height:12px;margin-top:-6px;background-color:#e7e7e7;}

body.hsp-login3 aside.login-guide {margin-top:73px;}
body.hsp-login3 aside.login-guide li {position:relative;padding:2px 0 2px 8px;font-size:12px;color:#838383;letter-spacing:-0.025em;}
body.hsp-login3 aside.login-guide li:before {content:'';position:absolute;top:50%;left:0;width:3px;height:3px;margin-top:-2px;background-color:#3b3b3b;border-radius:3px;}
body.hsp-login3 aside.login-guide li em {font-weight:500;color:#363636;}
body.hsp-login3 aside.login-guide button.download {position:relative;margin:0;padding:0 2px 0 0;color:#2d88f4;background-color:transparent;}
body.hsp-login3 aside.login-guide button.download::after {content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background-color:#2d88f4;}

body.hsp-login3 aside.help-desk {margin-top:17px;}
body.hsp-login3 aside.help-desk ul {display:flex;padding:20px 0;background-color:#f8f8f8;border-radius:7px;}
body.hsp-login3 aside.help-desk ul li {flex:1 1 auto;position:relative;text-align:center;}
body.hsp-login3 aside.help-desk li a {display:inline-block;padding:6px 0 4px;font-weight:500;color:#4a4a4a;}
body.hsp-login3 aside.help-desk li + li:before {content:'';position:absolute;top:50%;left:0;width:2px;height:12px;margin-top:-6px;background-color:#ccc;}

body.hsp-login3 .footer{padding:0 0 0 90px;font-size:11.5px;font-weight:300;color:#676767;}

/*****************************************************************
  pop_modal
*****************************************************************/
/* dimmed */
.dimmed {position:fixed;left:0;top:0;width:100%;height:100%;min-width:100%;min-height:100%;background:rgba(0,0,0,0.6);}
/* 레이어팝업 */
.pop_modal {display:none;position:relative;width:600px;background:#fff;border-radius:10px;z-index:200;opacity:0;}
.pop_modal {font-family:'맑은 고딕', 'malgun gothic';font-size:13px;font-weight:300;line-height:1.5;color:#000;}
.pop_modal.open {display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);opacity:1;}
.pop_modal .header {position:relative;padding:10px 20px 0;background:transparent;}
.pop_modal .header h2 {padding:6px 28px 8px 0;line-height:1.5;font-family:'맑은 고딕', 'malgun gothic';font-size:16px;font-weight:bold;color:#000;letter-spacing:-0.1em;}
.pop_modal .header button {overflow:hidden;display:block;position:absolute;right:12px;top:8px;width:38px;height:0;padding:38px 0 0;background:transparent;opacity:1;z-index:201}
.pop_modal .header button:before,
.pop_modal .header button:after {content:'';position:absolute;top:50%;left:50%;width:18px;height:2px;margin:0 0 0 -9px;background-color:#2c2724;}
.pop_modal .header button:before {transform:rotate(-45deg)}
.pop_modal .header button:after {transform:rotate(45deg)}
.pop_modal .content {min-height:220px;max-height:500px;margin:0;padding:10px 20px;overflow-y:auto;}
.pop_modal .btn_area {padding:10px 20px;}
.pop_modal.system {width:360px;}
.pop_modal.system .msg_area {padding:0 0 20px;text-align:center;}
.pop_modal.system .msg_area .msg_tit[class*='ic']:before {content:'';display:block;width:50px;height:50px;margin:0 auto 10px;background-repeat:no-repeat;}
.pop_modal.system .msg_area .msg_tit.ic1:before {background:url(../images/login/ic_system01.png);}
.pop_modal.system .msg_area .msg_tit.ic2:before {background:url(../images/login/ic_system02.png);}
.pop_modal.system .msg_area .msg_tit.ic3:before {background:url(../images/login/ic_system03.png);}
.pop_modal.system .msg_area .msg_tit {font-size:14px;font-weight:bold;letter-spacing:-0.09em;}
.pop_modal.system .msg_area .box {margin-top:10px;}
.pop_modal.system .msg_area .box li {display:inline-block;padding:0 5px;font-weight:bold;}
.pop_modal.system .msg_area .msg_btm {margin-top:40px;font-size:13px;letter-spacing:-0.055em;}
.pop_modal.system .msg_area2 {margin:0 -5px;}
.pop_modal.system .msg_area2 ul {width:100%;overflow:hidden;}
.pop_modal.system .msg_area2 li {float:left;width:50%;padding:0 5px;text-align:center;}
.pop_modal.system .msg_area2 li a {display:block;padding:40px 0 40px;font-weight:bold;color:#000;background-color:#f8f8f8;border-radius:10px;}
.pop_modal.system .msg_area2 li a:before {content:'';display:block;width:60px;height:60px;margin:0 auto 20px;background-repeat:no-repeat;}
.pop_modal.system .msg_area2 li:first-child a:before {background:url(../images/login/ic_lock02.png);}
.pop_modal.system .msg_area2 li:last-child a:before {background:url(../images/login/ic_lock01.png);}
/*****************************************************************
  tit/txt
*****************************************************************/
.tit + .tit,
.txt_type1 + .tit,
.tit + .txt_type1,
.table + .txt_type1 {margin-top:5px;}
.tit + .box,
.box + .tit,
.txt_type1 + .box,
.tit + .table, 
.table + .tit, 
.txt_type1 + .table,
.table + .box {margin-top:10px;}
.tit {font-size:13px;font-weight:normal;letter-spacing:-0.055em;}
.tit.sub {font-size:12px;}
.box .tit {font-weight:bold;}
p.txt_type1,
ul.txt_type1 > li {position:relative;padding-left:8px;font-size:12px;color:#4c4c4c;letter-spacing:-0.08em;}
p.txt_type1:before,
ul.txt_type1 > li:before {content:'';position:absolute;top:8px;left:0;width:3px;height:3px;background-color:#4c4c4c;border-radius:3px;}
ul.txt_type1 > li + li {margin-top:5px;}
.box {padding:10px;background-color:#f8f8f8;border-radius:10px;}
.txt_c1 {color:#ff5c2e;}
.txt_c2 {color:#f04043;}
.err_txt_s {padding:4px 0 0;font-size:11px;color:#f04043;letter-spacing: -0.08em}
/*****************************************************************
  btn
*****************************************************************/
ul.btn_area {display:flex;}
ul.btn_area li {flex:1 1 auto;}
.btn {display:inline-block;margin:0;padding:0 8px;border:1px solid #ccc;font-weight:bold;color:#000;background-color:#fff;border-radius:6px;text-align:center;vertical-align:middle;opacity:1;}
.btn.s1 {min-width:80px;height:32px;font-size:14px;letter-spacing:-0.09em;}
.btn:hover,
.btn:focus {background-color:#f8f8f8;border:1px dashed #000}
.btn.c1 {color:#fff;background-color:#ff5c2e;border-color:#ff5c2e;}
.btn.c1:hover,
.btn.c1:focus {background-color:#f34d1e;border:1px dashed #fff}
.btn.s2 {height:28px;font-size:13px;border:1px solid #ff5c2e}
.btn.s2:hover,
.btn.s2:focus {color:#ff5c2e;background-color:#fff;border:1px dashed #ff5c2e}
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:focus {color:#999;background-color:#f9f9f9;border:1px solid #e5e5e5;cursor:default;}
.btn:active {margin:0;box-shadow:none;}
/*****************************************************************
  table / inp
*****************************************************************/
.table{position:relative;margin:0;border-top:2px solid #000;background-color:#fff;word-break:break-all;overflow:hidden}
.table table{width:100%;border-collapse:collapse;border-spacing:0}
.table table th,.table table td{height:auto;vertical-align:middle;padding:4px 10px;border-width:0 0 1px 0;border-style:solid;border-color:#e5e5e5;}
.table table thead th{padding:4px 0;text-align:center;}
.table table tbody th{text-align:left}
.table table th{font-size:13px;background-color:#f4f4f4;}
.table table td{font-size:13px}
input.inptxt{width:200px;height:28px;line-height:28px;padding:0 8px;border:1px solid #ccc;background-color:transparent;vertical-align:middle;outline:none;border-radius:4px;}
input.inptxt:hover{border:1px solid #000;}
input.inptxt:focus{border:2px solid #000 !important;}
input.inptxt:read-only{background-color:#f9f9f9;border:2px solid #e5e5e5 !important;}
input.inptxt.w120{width:120px;}
input.inptxt.wide{width:100%;}
.textarea{width:100%;height:200px;padding:3px 8px;border:1px solid #ccc;resize:vertical;outline:none;border-radius:4px;}
.textarea:hover{border:1px solid #000;}
.textarea:focus{border:2px solid #000 !important;}
/* 2024-12-06 추가 : 이용안내 가이드 팝업 */
.img_con{padding:5px;text-align:center;}
.img_con > img {max-width:100%;}
.step_list li + li{margin-top:10px;padding-top:10px;border-top:1px solid #e5e5e5}
.step_list li strong{color:#4c4c4c;}
.pop_modal .btn_area .check {display:inline-block;position:relative;margin-top:5px;vertical-align:middle;}
.pop_modal .btn_area .check input[type="checkbox"]{position:absolute;width:0;height:0;opacity:0;}
.pop_modal .btn_area .check input[type="checkbox"] + label {margin:0;line-height:19px;font-size:12px;font-weight:300;color:#030303;cursor:pointer;}
.pop_modal .btn_area .check input[type="checkbox"] + label:before {content:'';display:inline-block;width:19px;height:19px;margin-right:4px;background: url(../images/login/ic_chk.png) no-repeat 0 -20px;vertical-align:middle;}
.pop_modal .btn_area .check input[type="checkbox"]:checked + label:before {background-position:0 0;}
/* 2024-12-13 에러페이지 배경색상 추가 */
.errorCode {font-size:12px;color:transparent;}
.error {background-color: #e4dfdf;}
/*********************************************************************************************************************************
  2023-09-22 로딩화면(hsp.css 발췌)
**********************************************************************************************************************************/
#loading,.loading_dimmed{top:0;left:0;width:100%;height:100%;}
#loading{position:fixed;z-index:9999}
.loading_dimmed{position:absolute;z-index:5}
#loading .data{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.35)}
#loading .data .inner{position:absolute;top:50%;left:0;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-align:center;}
.loading_s{display:inline-block;position:relative;width:40px;height:40px;margin:5px;vertical-align:-2px}
.loading_s:after{content:'';display:block;width:40px;height:40px;background:url(../../wsrv/images/common/loading_s.png) no-repeat;background-size:100%;animation:loadingS 1.0s linear infinite}
@keyframes loadingS {
	to{transform: rotate(360deg)}
}
#loading .txt{position:relative;margin-top:20px;font-size:16px;font-weight:500;color:#fff;text-align:center}