@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* ================== reset css ================== */
body, div, p, h1, h2, h3, h4, h5, h6, h7, ul, ol, li, dl, dt, dd, table, th, td, label, em, li, b, strong, span, form, input, textarea, button, section {
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Noto Sans","맑은고딕","Noto Sans KR","Nanum Gothic","돋움",dotum,sans-serif;
}
body, input, textarea, select, table, button {
font-weight:normal;
}
textarea, select {font-family:"Noto Sans","맑은고딕","Noto Sans KR","Nanum Gothic","돋움",dotum,sans-serif;font-size:1em}
textarea {white-space:pre-wrap}
select {margin:0}
button{border:none}
p {margin:0;padding:0;word-break:keep-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#666;text-decoration:none}
a:hover, a:focus {text-decoration:none}
*, :after, :before {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
select {-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(../img/arr_selectDown.png);background-position:center right 10px;background-size:initial;background-repeat:no-repeat}
select::-ms-expand {display:none}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus, input[type=date]:focus, input[type=date]:focus-visible {
outline:none !important;
box-shadow:none !important;
-webkit-box-shadow:0 0 0 0 white inset;
}
body {height:auto}
li {margin:0;padding:0;list-style:none}
a, a:hover, a:focus {text-decoration:none;cursor:pointer}
:hover {-webkit-transition:all 0.14s ease-in-out;-moz-transition:all 0.14s ease-in-out;-o-transition:all 0.14s ease-in-out;transition:all 0.14s ease-in-out}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active 
{transition:background-color 5000s ease-in-out 0s;-webkit-transition:background-color 9999s ease-out;-webkit-box-shadow:0 0 0px 1000px white inset !important}
body{display:flex;padding:0;background-color:transparent;background-size:cover;background-repeat:no-repeat;width:100%;height:100%;min-height:100vh}
section {width:100%}
section > img {width:100%;text-align:center;margin:0 auto}
input[type=checkbox], input[type=radio] {display:none;visibility:hidden}

table {width:100%;padding:0;border:0;border-spacing:0px;border-collapse:collapse}
table th, table td {font-size:14px;text-align:center;color: #5e5e5e}
table th {padding:14px 5px;color:#3c3c3c;font-weight:400;background-color:#f9f9f9;word-break:keep-all}
table tbody tr:first-child td {border-top:1px solid #eaeaea}
table td {padding:20px 5px;border-top:1px solid #f1f1f1}
table tbody tr:hover {background-color:#f0f9f7}
table tbody tr:hover td, table tbody tr:hover td p,  table tbody tr:hover td a {color:#222}
table tbody tr:hover td p span {color:#111}
td.pay-plus, td.pay-minus, td.pay-payment {width:230px}
td.bank {width:270px}
td.date p, td.bank p {display:inline-block;padding:0 3px}
tbody tr.cancel {background-color:#f7f7f7}
tbody tr.cancel td {color:#b1b1b1}
tbody tr:hover td.pay-plus p {color:#0173ff}
tbody tr:hover td.pay-minus p {color:#ed372d}
tbody tr:hover td.pay-payment p {color:#12cb5d}
tbody tr.apply:hover td.state p {color:#0173ff}
tbody tr.cancel:hover td.state p {color:#ed372d}
tbody tr.cancel:hover {background-color:#f1f1f1}

#container {display:flex;flex-direction:column;width:100vw;min-height:100vh;height:100%;overflow-y:auto}
#cont_area  {width:calc(100vw - 240px);min-height:calc(100vh - 45px);height:100%;overflow-y:auto}
#cont_area  > div {min-width:1300px;overflow-x:auto;width:100%}
#cont_area.cont_area  {margin-left:240px}
#cont_area.page_area {margin:50px 0 0 240px !important;min-height:calc(100vh - 45px - 50px)}
#cont_area.page_area .top + div {min-height:calc(100vh - 45px - 50px - 129px)}
#cont_area > div div.top {position:fixed;display:flex;justify-content:space-between;align-content:center;align-items:center;top:45px;width:calc(100% - 240px);height:50px;background-color:#f7f7f7; z-index:999}
#cont_area > div div.top .title {position:relative;display:flex;align-content:center;align-items: center;width:260px;height:100%;padding:0 0 0 20px;background-color:#fff}
#cont_area > div div.top .title:after {position:absolute;display:block;width:100%;height:2px;bottom:-1px;left:0;background-color:#333;content:''}
#cont_area > div div.top .title h5 {font-size:16px;color:#222;font-weight:400}
#cont_area > div div.top .navi {padding:0 20px 0 0}
#cont_area > div div.top .navi p{display:flex;flex-direction:row;font-size:14px;color:#777;font-weight:300}
#cont_area > div div.top .navi p span {padding:0 7px}

.box-style {background-color:#fff}
.box-style .tit {position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:45px;border-bottom:1px solid #f1f1f1}
.box-style .tit > div {position:relative;display:flex;flex-direction:row;align-content:center;align-items:center}
.box-style .tit h7{font-size:14px;color:#3c3c3c;font-weight:500;display:flex}
.box-style .tit p  {font-size:12px;color:#919191;font-weight:400}
.box-style .tit a  {}
.box-style .tit h7 span  {display:flex;align-items:center;align-content:center;font-size:0.95em;color:#555;font-weight:400}
.box-style .tit h7 span:before  {display:flex;width:15px;height:1px;background-color:transparent;content:''}
.box-style .tit h7 span em {padding:0 3px;color:#0573e4;font-weight:600}
.box-style .search {position:relative;display:flex;flex-direction:row;align-items:center;gap:5px;height:60px;padding:0 20px;border-bottom:1px solid #f1f1f1}
.index_area .box-style {border:1px solid #eaeaea}

.pageing_box {display:flex;justify-content:center;height:70px;border-top:1px solid #eaeaea}
.pageing_box > div {display:flex;align-content:center;align-items:center;flex-direction:row}
.pageing_box  div > a + div {display:flex;padding:0 15px}
.pageing_box  div > a + div a {display:flex;font-size:15px;font-weight:400;color:#777;flex-direction:column;align-items:center;padding:0 10px;margin:0 3px}
.pageing_box  div > a + div a.on, .pageing_box  div > a + div a:hover {color:#111}
.pageing_box  div > a + div a.on:after {content:'';display:flex;width:calc(100% + 6px);height:2px;margin:5px 0 -5px;background:#000}
.pageing_box .pageBtn {display:flex;justify-content:center;align-items:center;width:30px;height:30px;background:rgba(255, 255, 255, 1);border:1px solid #b1b1b1}
.pageing_box .pageBtn:hover {background:rgba(51,51,51,1);border:1px solid #111}
.pageing_box .pageBtn:hover img {-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}

.btn_style {display:flex;justify-content:center;align-items:center;font-weight:400;text-align:center;word-break:keep-all;border:1px solid;cursor:pointer}
.btn_style.radius{-webkit-radius:3px;-moz-border-radius:3px;border-radius:3px}
.btn_style.small {font-size:13px;line-height:25px;height:25px;font-weight:300;padding:0 17px;width:auto}
.btn_style.medium {font-size:14px;line-height:35px;height:35px;font-weight:300;padding:0 17px;width:auto}
.btn_style.big {font-size:14px;line-height:40px;height:40px;width:120px}
.btn_style.submit {font-size:16px;line-height:60px;height:60px;width:100%}
.btn_style.pop {font-size:15px;line-height:42px;height:42px;width:160px}
.btn_style.table  {font-size:12px;line-height:23px;height:25px;font-weight:400;padding:0 15px;width:auto;display:inline-block;}
.btn_style.input  {font-size:12px;line-height:23px;height:auto;font-weight:400;padding:0 15px;width:auto;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0}
.btn_style.submit {background-color:#009970;border-color:#009970}
.btn_style.submit:hover {background-color:#00a176}
.btn_style.black{background-color:#4e4e4e;border-color:#4e4e4e;color:#fff}
.btn_style.green{background-color:#009970;border-color:#009970;color:#fff}
.btn_style.white {background-color:#fff;border-color:#c1c1c1}
.btn_style.gray {background-color:#f1f1f1;border-color:#e1e1e1}
.btn_style.excel {background-color:#008000;border-color:#008000}
.btn_style.read {background-color:#f7f7f7;border-color:#f7f7f7;color:#b1b1b1;cursor:not-allowed}
.btn_style.deactivate{background-color:#d7d7d7;border-color:#d7d7d7;color:#4e4e4e;cursor:not-allowed}
.btn_style.black:hover{background-color:#3c3c3d;border-color:#3c3c3d}
.btn_style.green:hover{background-color:#00a176;border-color:#00a176}
.btn_style.white:hover {background-color:#f7f7f7;border-color:#c1c1c1}
.btn_style.gray:hover {background-color:#4e4e4e;border-color:#4e4e4e;color:#fff}
.btn_style.excel:hover {background-color:#1a770a;border-color:#1a770a}
.btn_style.read:hover {background-color:#f7f7f7;border-color:#f7f7f7}
.btn_style.deactivate:hover{background-color:#d7d7d7;border-color:#d7d7d7}

.c-point {color:#fd5b49!important}
.c-green {color:#12cb5d!important}
.c-blue {color:#0173ff!important}
.c-red {color:#ed372d!important}
.align-r {text-align:right}
.align-l {text-align:left}
.align-c {text-align:center}
.overflow-y {overflow-y:auto}
.overflow-x {overflow-x:auto}
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
.scroll_hidden {overflow:hidden;width:100%;height:100vh;touch-action:none}

.search .input_box {background-color:#fff;border:1px solid #ececec}
.search .input_box input {height:35px}
.search .select_box select {height:35px}
.form_box .input_box input {width:100%}

.input_box {position:relative;display:block;margin:0;background-color:#f7f7f7;font-size:0;-webkit-radius:3px;-moz-border-radius:3px;border-radius:3px;z-index:2;overflow:hidden}
.input_box.readonly {background:#eaeaea!important;cursor:not-allowed}
.input_box.readonly input {color:#5e5e5e!important;pointer-events:none}
.input_box.readonly a {pointer-events:none;background-color:#c1c1c1;border-color:#c1c1c1}
.input_box.readonly input:hover, .input_box.readonly a:hover{cursor:not-allowed}
.input_box.add_btn {display:flex;flex-direction:row;align-content:center;align-items:stretch}
.input_box.add_btn input {padding:0 }
.input_box.focus	{background:#f0f5fe}
.input_box.focus.readonly {background:#eaeaea!important}
.input_box:after {content:".";height:0;display:block;visibility:hidden;clear:both}
.input_box .date_box {display:flex;justify-content:center;align-items:center;align-content:center;padding:0 20px}
.input_box .wave{padding:0 20px;font-size:14px}
.input_box input {width:100%;height:60px;border:none;outline:none;background:transparent;font-size:14px;font-weight:400;color:#333;background-color:transparent !important}
.select_box {position:relative;display:block;margin:0;background:#fff;font-size:0;border:1px solid #ececec;-webkit-radius:3px;-moz-border-radius:3px;border-radius:3px;z-index:2;overflow:hidden}
.select_box select {position:relative;height:60px;border:0 none;outline:0 none;padding:0 40px 0 10px;font-size:14px;color:#333;appeaance:none;-moz-appearance:none;-webkit-appearance:none}
.select_box select option {padding:3px 0;font-size:14px}
.select_box select:focus {background-image:url(../img/arr_selectUp.png)}

.input_box label {position:absolute;left:10px;top:calc(50% - 7px);font-size:13px;color:#9c9c9d;line-height:14px;transition:all 0.2s ease;white-space:nowrap;z-index:5}
/* 안움직이는 라벨 */
.input_box input:focus ~ label,
.input_box input:valid ~ label, .input_box.readonly label,
.input_box input:-webkit-autofill ~ label {display:none}
.input_box input[type=text], .input_box input[type=password], .input_box input[type=number] {padding:0 10px}
/* 움직이는 라벨 */
.input_box.act input:focus ~ label,
.input_box.act input:valid ~ label, .input_box.act.readonly label,
.input_box.act input:-webkit-autofill ~ label {font-size:12px;top:2px;color:#777}
.input_box.act input[type=text], .input_box.act input[type=password], .input_box.act input[type=number] {padding:5px 10px 0}

.input_box input[type=text]::-ms-clear, .input_box input[type=password]::-ms-clear, .input_box input[type=number]::-ms-clear {display:none}
.input_box input[type=text]:-moz-placeholder, .input_box input[type=password]:-moz-placeholder, .input_box input[type=number]:-moz-placeholder {color:#999999;font-weight:normal}
.input_box input[type=text]:-ms-input-placeholder, .input_box input[type=password]:-ms-input-placeholder, .input_box input[type=number]:-ms-input-placeholder {color:#999999;font-weight:normal;letter-spacing:-0.75px}
.input_box input[type=text]::-moz-placeholder, .input_box input[type=password]::-moz-placeholder, .input_box input[type=number]::-moz-placeholder {color:#999999;letter-spacing:-0.75px}
.input_box input[type=text]::-webkit-input-placeholder, .input_box input[type=password]::-webkit-input-placeholder, .input_box input[type=number]::-webkit-input-placeholder {color:#999999;font-weight:normal;letter-spacing:-0.75px}
.input_box input[type=password]::-ms-reveal, .input_box input[type=password]::-ms-reveal, .input_box input[type=number]::-ms-reveal {display:none}
.input_box input[type=text]:focus, .input_box input[type=text]:valid, .input_box input[type=password]:focus, .input_box input[type=password]:valid, .input_box input[type=number]:focus, .input_box input[type=number]:valid {transition:background-color 5000s ease-in-out 0s;-webkit-transition:background-color 9999s ease-out;-webkit-box-shadow:0 0 0px 1000px #ebf7f4 inset !important}
.input_box.readonly input[type=text]:focus, .input_box.readonly input[type=text]:valid, .input_box.readonly input[type=password]:focus, .input_box.readonly input[type=password]:valid, .input_box.readonly input[type=number]:focus, .input_box.readonly input[type=number]:valid {transition:background-color 5000s ease-in-out 0s;-webkit-transition:background-color 9999s ease-out;-webkit-box-shadow:0 0 0px 1000px transparent inset !important;cursor:not-allowed}
.input_box.readonly input[type=text]:-moz-placeholder, .input_box.readonly input[type=password]:-moz-placeholder, .input_box.readonly input[type=number]:-moz-placeholder {color:#333}
.input_box.readonly input[type=text]:-ms-input-placeholder, .input_box.readonly input[type=password]:-ms-input-placeholder, .input_box.readonly input[type=number]:-ms-input-placeholder {color:#333}
.input_box.readonly input[type=text]::-moz-placeholder, .input_box.readonly input[type=password]::-moz-placeholder, .input_box.readonly input[type=number]::-moz-placeholder {color:#333}
.input_box.readonly input[type=text]::-webkit-input-placeholder, .input_box.readonly input[type=password]::-webkit-input-placeholder, .input_box.readonly input[type=number]::-webkit-input-placeholder {color:#333}
.input_box input:-webkit-autofill, .input_box input:-webkit-autofill:hover, .input_box input:-webkit-autofill:focus, .input_box input:-webkit-autofill:active, .input_box input:-webkit-autofill:valid, .input_box input:autofill, .input_box input:autofill:hover, .input_box input:autofill:focus, .input_box input:autofill:active,.input_box input:autofill:valid {transition:background-color 5000s ease-in-out 0s;-webkit-transition:background-color 9999s ease-out;-webkit-box-shadow:0 0 0px 1000px #ebf7f4 inset !important}
.input_box input:focus,
.input_box input:valid,
.input_box input:-webkit-autofill,
.input_box input:-internal-autofill-selected {transition:background-color 9999s ease-out;background-color:transparent !important}

.check_box label {position:relative;display:block;margin:0 auto;padding:0 0 0 27px;font-size:15px;line-height:15px;color:#333;cursor:pointer}
.check_box.big label {padding:0 0 0 32px;font-size:16px;line-height:16px}
.check_box.small label {padding:0 0 0 24px;font-size:14px;line-height:14px}
.check_box label:before {content:'';display:block;position:absolute;left:0;top:calc(50% - 10px);width:20px;height:20px;background:url(../img/arr-check-off.png)}
.check_box.big label:before {top:calc(50% - 12px);width:25px;height:25px;background:url(../img/arr-check-big-off.png)}
.check_box.small label:before {top:calc(50% - 8px);width:17px;height:17px;background:url(../img/arr-check-small-offpng)}
.check_box input:checked+label:before {background:url(../img/arr-check-on.png)}
.check_box.big input:checked+label:before {background:url(../img/arr-check-big-on.png)}
.check_box.small  input:checked+label:before {background:url(../img/arr-check-small-on.png)}

.radio_box {display:flex;align-items:center}
.radio_box div ~ div {margin:0 0 0 15px}
.radio_box label {position:relative;top:0;left:0;display:block;margin:0 auto;padding:0 0 0 27px;font-size:15px;color:#333;cursor:pointer}
.radio_box.big label {padding:0 0 0 32px;font-size:16px;line-height:16px}
.radio_box.small label {padding:0 0 0 24px;font-size:14px;line-height:14px}
.radio_box label:before {content:'';display:block;position:absolute;left:0;top:calc(50% - 10px);width:20px;height:20px;background:url(../img/arr-radio-off.png)}
.radio_box.big label:before {top:calc(50% - 12px);width:25px;height:25px;background:url(../img/arr-radio-big-off.png)}
.radio_box.small label:before {top:calc(50% - 8px);width:17px;height:17px;background:url(../img/arr-radio-small-off.png)}
.radio_box input:checked+label:before {background:url(../img/arr-radio-on.png)}
.radio_box.big input:checked+label:before {background:url(../img/arr-radio-big-on.png)}
.radio_box.small input:checked+label:before {background:url(../img/arr-radio-small-on.png)}

/* 팝업*/
.pop_wrap {position:fixed;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background-color:rgba(0,0,0,0.5);z-index:999}
.pop {display:flex;flex-direction:column;justify-content:center;align-items:stretch}
.pop_inner{display:flex;flex-direction:column;box-sizing:border-box;width:clamp(510px,40vw,670px);padding:0;background-color:#fff;overflow:hidden}
.pop_tit {position:relative;height:60px;display:flex;align-items:center;flex-direction:row;justify-content:space-between}
.pop_tit:after {position:absolute;height:1px;width:100%;bottom:0;left:0;display:flex;background:#e1e1e1;content:'';z-index:999}
.pop_tit p {display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding-left:30px;color:#1c1c1c;z-index:999}
.pop_tit p strong{font-size:15px;color:#1c1c1c;font-weight:500}
.pop_tit button {width:60px;height:60px;background:url(../img/arr_close.png) center no-repeat #f7f7f7;border-left:1px solid #f1f1f1;cursor:pointer;z-index:998}
.pop_tit button:hover {background:url(../img/arr_close.png) center no-repeat #f1f1f1}
.pop_bottom {position:relative;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;gap:10px;padding:15px 30px;background-color:#f7f7f7}
.pop_bottom:after {position:absolute;height:1px;width:100%;top:0;left:0;display:flex;background:#f1f1f1;content:'';z-index:999}
.pop_content {display:flex;flex-direction:column;max-height:calc(80vh - 60px - 75px);padding:25px 0;overflow-y:auto}
.pop_content .content_tit{padding:0 30px 15px;font-size:17px;line-height:27px;font-weight:500;color:#1c1c1c;word-break:keep-all}
.pop_content .content_tx{padding:10px 30px;font-size:15px;line-height:24px;font-weight:400;color:#3c3c3c;word-break:keep-all}
.pop_content .content_tit + .content_tx {padding:0 35px 10px}
.pop_content .content_inner {}
.pop_content .content_inner ~ div {margin-top:15px}
.pop_content .content_inner em {font-size:1.2em;font-weight:700}
.pop_content .content_inner.tx {}
.pop_content .content_inner.table {}
.pop_content .content_inner.table > div {display:flex;flex-direction:column}
.pop_content .content_inner.table > div > div {display:flex;flex-direction:row;border-bottom:1px solid #eaeaea}
.pop_content .content_inner.table > div > div:first-child {border-top:1px solid #eaeaea}
.pop_content .content_inner.table > div > div > div {display:flex;flex-direction:row;align-content:center;align-items:center;padding:15px 30px;font-size:15px;white-space:nowrap}
.pop_content .content_inner.table > div > div > div:first-child {width:160px;border-right:1px solid #f1f1f1;background-color:#f9f9f9}
.pop_content .content_inner.form {padding:0}
.pop_content .content_inner.form > div {display:flex;flex-direction:column}
.pop_content .content_inner.form > div > div {display:flex;flex-direction:row;padding:10px 30px}
.pop_content .content_inner ul {display:flex;flex-direction:column;padding:0 30px}
.pop_content .content_inner li  {display:flex;flex-direction:row;padding:7px 0}
.pop_content .content_inner li  > p {position:relative;display:flex;align-content:center;align-items:center;font-size:14px}
.pop_content .content_inner li  > p.sub_tx {font-size:13px;letter-spacing:-0.3px;color:#5e5e5e}
.pop_content .content_inner li  > p.point:before {content:'*';display:block;color:#fd5b49!important}

@media (max-width:500px){

}