@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
    --prime:#4459d9;
    --sec:#003675;
    --sub:#edf1f5;
    --blk:#1d1d1d;
    --gry:#555555;
    --wht:#fff;
    --red:#ee0000;
    --bg-soft:#edf1f5;
    --bg-normal:#eff4ff;
    --bg-gry:#f0f0f0;
    --bg-red:#ffeff3;
    --bg-light:#f8f8f8;
    --bg-dark:#0a294e;
    --bd-gry:#717171;
    --bd-blue:#99b0cb;
    --bd-light:#d8d8d8;
    --bd-soft:#e4e4e5;
    --bd-dark:#2d2d2d;
}

/* reset */
html, body {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: "Pretendard", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    word-break: keep-all;
    word-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

html {
}

body {
    overflow-x: hidden;
}

*:focus {
    outline-offset: -0.40px;
    outline: 0 none;
}

::-moz-selection {
    background: #003675;
    color: #ffffff;
}

::selection {
    background: #003675;
    color: #ffffff;
}

body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
a,
button,
select,
ul,
li,
span,
em,
label,
:before,
:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-text-size-adjust: none;
    font-family: inherit;
    line-height: 1.5;
    letter-spacing: inherit;
}

pre {
    font-family: inherit;
}

input,
textarea,
a,
button,
select,
span,
label,
:before,
:after {
    font-size: inherit;
    font-weight: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
    font-weight: 700;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img,
fieldset {
    border: 0;
}

fieldset {
    min-width: 100%;
}

img {
    max-width: 100%;
    vertical-align: top;
}

ul,
ol {
    list-style: none;
}

em,
address,
i {
    font-style: normal;
}

a,
a:hover,
a:active,
a:focus {
    color: inherit;
    text-decoration: none;
}

button,
input[type=submit],
input[type=button] {
    overflow: visible;
    margin: 0;
    background-color: transparent;
    border: none;
    -webkit-appearance: button;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

textarea {
    resize: none;
}

label {
    cursor: pointer;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type=text],
input[type=tel],
input[type=password],
input[type=file],
input[type=number],
input[type=email],
input[type=date],
input[type=search],
textarea {
    -webkit-box-shadow: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

caption {
    position: static !important;
    margin: 0 !important;
}

table {
    table-layout: fixed;
    max-width: none;
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
}

[role=button] {
    cursor: pointer;
}

.img img {
    min-width: 100%;
    max-width: 100%;
}

.img.bg-img {
    background-size: cover;
}

.blind,
hr,
.sr-only,
legend,
caption {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.al {
    text-align: left !important;
}

.ac {
    text-align: center !important;
}

.ar {
    text-align: right !important;
}

.m-l-auto {
    margin-left:auto !important;
}
.m-r-auto {
    margin-right:auto !important;
}
.scroll-no {
    overflow:hidden;
}
@media (max-width: 1023px) {
    .pc-only {
        display: none !important;
    }
    .pc-only.read {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    .mob-line {
        display: block;
        line-height: inherit;
    }
}
@media (min-width: 1024px) {
    .mob-only {
        display: none !important;
    }
    .mob-only.read {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    .pc-line {
        display: block;
        line-height: inherit;
    }
}
/* scroll */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-thumb {
    outline: none;
    border-radius: 10px;
    border: 4px solid transparent;
    box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.15);
}

::-webkit-scrollbar-thumb:hover {
    border: 4px solid transparent;
    box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.3);
}

::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: transparent;
}

/* tooltip */
.tool-tip {
    position: relative;
    display: inline-block;
}
.tool-tip .tooltip-box {
    position:absolute; 
    right:0; 
    bottom:45px; 
    z-index:10; 
    display:none; 
    width:max-content;
    padding:10px;     
    background-color:#fff;
    border:1px solid #d8d8d8;
    border-radius:10px; 
    font-size:1.4rem; 
    font-weight:normal; 
    color:#1d1d1d; 
    text-align:left;
    box-shadow: 5px 8.66px 15px 0px rgba( 0, 0, 0, .3 );
}
.tool-tip .tooltip-box::before {
    display: block;
    content: " ";
    position: absolute;
    border-style: solid;
    border-width: 5px;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: var(--wht) transparent transparent transparent;
}
.tool-tip:hover .tooltip-box {
    display: block;
}
/* icon */
.ico {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
}
.ico.info {
    width:24px;
    height:24px;
    background-image: url('/img/common/ico_info.png');
}
.ico.reply {
    width:16px;
    height:16px;
    background-image: url('/img/common/ico_reply.png');
}
.ico.comment {
    width:16px;
    height:16px;
    background-image: url('/img/common/ico_comment.png');
}

/* button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.40px;
    width: auto;
    height: 46px;
    padding: 16px 36px;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 28px;
    font-size: 15px;
    color: #fff;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.4s ease-in-out;
}
.btn:hover {
    color:#fff;
    border-color:#F98D21;
    background-color: #F98D21;
}
.btn + .btn {
    margin-left:8px;
}
.btn.ico-more::after {
    margin-top:-1px;
    background-image:url('/img/common/ico_more.png') ;
}
.btn.ico-more.blue::after {
    margin-left:7px;
    background-image:url('/img/common/ico_more_blue.png') ;}
.btn.ico-print::before {
    margin-top:-1px;
    margin-right: 5px;
    background-image:url('/img/common/ico_print.png') ;
}
.btn.ico-file::before {
    margin-top:-1px;
    margin-right: 7px;
    background-image:url('/img/common/ico_file.png') ;
}
.data .btn.ico-file::before {
    margin-right:0;
}
.btn.ico-attach::before {
    margin-top:-1px;
    margin-right: 7px;
    background-image:url('/img/common/ico_down_single.png');
}
@media (max-width: 1023px) {
    .btn-wrap {
        margin-top:30px;
    }
}
@media (max-width: 767px) {
    .btn {
        padding:0 15px;
        min-width: 64px;
        height:40px;
    }
    .btn.small {
        padding:0 10px;
        min-width: 50px;
        height:32px;
    }
    .btn.large {
        padding:0 20px;
        min-width: 80px;
        height:50px;
    }
}



/* pagination */
.disabled{
    pointer-events: none;
    cursor: default;
}
.pagination {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    margin-top: 40px;
}
.pagination .page-navi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    color: #B09184;
    width: 17px;
    height: 20px;
    font-size:15px;
    text-indent:-999em;
}
.pagination .page-navi.prev {
    
}
.pagination .page-navi::before,
.pagination .page-navi::after {
    background-repeat: no-repeat;
    background-position: center;
}
.pagination .page-navi.prev::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    content: "";
    width: 20px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='12' viewBox='0 0 9 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.83335 1L1.16669 6L7.83335 11' stroke='%23111111' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    stroke: #111;
}
.pagination .page-navi.prev:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='12' viewBox='0 0 9 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.83335 1L1.16669 6L7.83335 11' stroke='%23F98D21' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.pagination .page-navi.prev:disabled::before {
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='12' viewBox='0 0 9 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.83335 1L1.16669 6L7.83335 11' stroke='%23B09184' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.pagination .page-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    order: 2;
    gap: 20px;
}
.pagination .page-links .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    color: #B09184;
    min-width: 17px;
    height: 40px;
    font-size:17px;
}
.pagination .page-links .page-link:hover {
    color:#F98D21;
    transition: 0.4s ease-in-out;
}
.pagination .page-link.active {
    color: #000;
    text-decoration:underline;
    text-underline-offset: 4px;
}
.pagination .page-navi.next {
    
}
.pagination .page-navi.next::after {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    content: "";
    width: 20px;
    height: 16px;
    background-image: url('../img/btn_next.svg');
    stroke: #111;
}
.pagination .page-navi.next:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='12' viewBox='0 0 9 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16671 1L7.83337 6L1.16671 11' stroke='%23F98D21' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.pagination .page-navi.next.disabled:after {
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='12' viewBox='0 0 9 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16671 1L7.83337 6L1.16671 11' stroke='%23B09184' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
@media (max-width: 1023px) {
    .pagination {
        /* padding-top:20px;
        padding-top:40px */
    }
    .pagination .page-navi {
        font-size:15px;
    }
    /* .pagination .page-navi.prev {
        position: absolute;
        top:0;
        left:50%;
        margin-left:-60px;
    }
    .pagination .page-navi.next {
        position: absolute;
        top:0;
        right:50%;
        margin-right:-60px;
    } */
    /* 모바일에서 버튼 3개만 노출 */
    .pagination .page-links .page-link:nth-child(n+6) {
        display: none;
    }
}


/* check box & radio */
.chk-area {
    display: flex;
    gap: 26px;
}
input[type=radio], 
input[type=checkbox] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.form-check input[type=radio] ~ label, 
.form-check input[type=checkbox] ~ label {
    position: relative;
    display: inline-flex;
    min-height: 20px;
    padding-left: calc(20px + 8px);
    font-size: 20px;
    line-height: 20px;
}
.form-check input[type=radio] ~ label:before, 
.form-check input[type=radio] ~ label:after, 
.form-check input[type=checkbox] ~ label:before, 
.form-check input[type=checkbox] ~ label:after {
    display: block;
    content: "";
    transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-check input[type=radio] ~ label:before, 
.form-check input[type=checkbox] ~ label:before {
    z-index: 3;
}
.form-check input[type=checkbox] ~ label:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 1px solid #717171;
    border-radius: 4px;
}
.form-check input[type=checkbox] ~ label:after {
    position: absolute;
    top: calc((20px - 20px) / 2);
    left: calc((20px - 20px) / 2);
    width: 20px;
    height: 20px;
    background: url(../../img/component/common/ico_check_primary_checked.svg) no-repeat 0 0;
    background-size: contain;
    opacity: 0;
}


.form-check input[type=radio] ~ label:before {
    position: absolute;
    top: 0;
    left: 0;
}
.form-check input[type=checkbox] ~ label:after {
    position: absolute;
    top: calc((20px - 20px) / 2);
    left: calc((20px - 20px) / 2);
    width: 20px;
    height: 20px;
    background: url(../../img/component/common/ico_check_primary_checked.svg) no-repeat 0 0;
    background-size: contain;
    opacity: 0;
}

.inline-form {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap:40px;
}
.input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top:40px;
    width: 100%;
}
.form-tit {
    font-size:17px;
    font-weight: 700;
}
.form-conts {}

.form-control {
    position: relative;
    width: 100%;
    height: 46px;
    padding: 0 20px;
    background-color: #ffffff;
    border: 1px solid #717171;
    border-radius: 8px;
    font-family: inherit;
    font-size: 19px;
    color: #1D1D1D;
    transition: 0.4s ease-in-out;
}
@media (max-width: 767px) {
    .form-control {
        padding:0 15px;
        height:40px;
        font-size:15px;
    }
    .form-control.small {
        padding:0 10px;
        height:32px;
        font-size:13px;
    }
    .form-control.large {
        padding:0 20px;
        height: 50px;
        font-size:17px;
    }
}
.form-control.small {
    padding:0 15px;
    height:40px;
    border-radius: 6px;
}
.form-control.large {
    min-width: 500px;
    height:56px;
}
.form-control:focus {
    border-color: var(--prime);
    border-width: 2px;
    outline: none;
}
.form-control[readonly] {
    background-color: #e4e4e4;
    border-color: #d8d8d8;
    color: var(--gry);
}
.form-control[readonly].datepicker {
    background-color: #ffffff;
    border-color: #717171;
    color: #1D1D1D;
}
.form-control[readonly]::-webkit-input-placeholder {
    color: #717171;
}
.form-control[readonly]::-moz-placeholder {
    color: #717171;
}
.form-control[readonly]:-ms-input-placeholder {
    color: #717171;
}
.form-control[readonly]::-ms-input-placeholder {
    color: #717171;
}
.form-control[disabled] {
    background-color: #D8D8D8;
    border-color: #C6C6C6;
    color: #717171;
}
.form-control[disabled]::-webkit-input-placeholder {
    color: #717171;
}
.form-control[disabled]::-moz-placeholder {
    color: #717171;
}
.form-control[disabled]:-ms-input-placeholder {
    color: #717171;
}
.form-control[disabled]::-ms-input-placeholder {
    color: #717171;
}
.error .form-control, .error.form-control, .error .form-control:focus, .error.form-control:focus {
    border-color: #E71825;
    border-width: 2px;
}
.validation-chk, .form-info {
    display: flex;
    position: relative;
    min-height: 24px;
    margin-top: var(--krds-spacer-3);
    font-size: var(-- krds---krds-fz-body-sm);
    color: var(--krds-gray-70);
    line-height: 24px;
}
.validation-chk:empty {
    display: none;
}
.validation-chk:before, .form-info:before {
    margin-right: 14px;
    background-color: #D8D8D8;
}
.error .validation-chk, .error .form-info {
    color: var(--krds-danger);
}
textarea.form-control {
    height: var(--krds-spacer-50);
    padding: 16px;
    line-height: 1.5;
}
.textarea-wrap .form-control:placeholder-shown {
    -webkit-box-orient: inherit;
}
.textarea-count {
    font-size: var(--krds-fz-label-sm);
    width: 100%;
    margin-top: var(--krds-spacer-3);
    text-align: right;
}
.textarea-count .text-num {
    margin-left: var(--krds-spacer-default2);
}
input[type=number] {
    -moz-appearance: textfield;
    margin: 0;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type='text']::-ms-clear {
    display: none;
}
/* placeholder style */
.form-control::-webkit-input-placeholder {
    color: #8E8E8E;
}
.form-control::-moz-placeholder {
    color: #8E8E8E;
}
.form-control:-ms-input-placeholder {
    color: #8E8E8E;
}
.form-control::-ms-input-placeholder {
    color: #8E8E8E;
}
/* 날짜선택 */
.datepicker-input {
    position: relative;
    z-index: 1;
}
.datepicker-input .form-control {
    padding-right: 56px;
    background-image: none;
}
.datepicker-input .ui-datepicker-trigger {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 40px;
    height: 40px;
    padding: 16px;
    text-indent: -9999px;
    transform: translateY(-50%);
    background: url('/img/common/bg_calendar.png') no-repeat center;
    background-size: 24px;
}
.datepicker-input .range::after {
    display: none;
}
/* form layouts */
.form-wrap {
    display: grid;
    gap: 24px;
}
.form-wrap > li, .form-wrap.standalone, .form-wrap > .row {
    line-height: 1;
}
.form-tit {
    display: flex;
    position: relative;
    font-size: 15px;
    color: #1d1d1d;
}
.form-tit .mark {
    display: inline-block;
    color:#ee0000;
    vertical-align: text-bottom;
}
.form-wrap .form-conts.group > .form-control {
    margin-right: 8px;
}
/* radio checkbox */
.chk-area.chk-column {
    flex-direction: column;
}
.chip-wrap {
    gap: 8px;
}
.chip-wrap .form-chip {
    flex: 1;
}
.chip-wrap .form-chip .radio:not(:checked) ~ .form-chip-outline::before {
    display: none;
}
.chip-wrap .form-chip .radio ~ .form-chip-outline {
    justify-content: center;
    width: 100%;
    padding: 0;
}
.form-check input[type=radio] ~ label:before, .form-check input[type=checkbox] ~ label:before, .form-check input[type=radio] ~ label:after, .form-check input[type=checkbox] ~ label:after {
    display: block;
    transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-check input[type=radio] ~ label:before, .form-check input[type=checkbox] ~ label:before {
    z-index: 3;
}
.form-check input[type=radio] ~ label:after, .form-check input[type=checkbox] ~ label:after {
    z-index: 4;
}
.form-check input[type=radio]:disabled + label, .form-check input[type=checkbox]:disabled + label {
    color: #8E8E8E;
    cursor: default;
}
.form-check input[type=radio] ~ label:before {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 1px solid #717171;
    border-radius: 50%;
}
.form-check input[type=radio] ~ label:after {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
}
.form-check input[type=radio]:checked ~ label:before {
    border-color: var(--prime);
}
.form-check input[type=radio]:checked ~ label:after {
    background-color: var(--prime);
}
.form-check input[type=radio]:checked:disabled ~ label:before {
    border-color: #C6C6C6;
    background-color: #E4E4E4;
}
.form-check input[type=radio]:checked:disabled ~ label:after {
    display: block;
    background-color: #C6C6C6;
}
.form-check input[type=radio]:disabled ~ label:before {
    border-color: #C6C6C6;
    background-color: #E4E4E4;
}
.form-check input[type=radio]:disabled ~ label:after {
    display: none;
    background-color: #C6C6C6;
}
.form-check input[type=checkbox] ~ label:before {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 1px solid #717171;
    border-radius:4px;
}
.form-check input[type=checkbox] ~ label:after {
    width: 20px;
    height: 20px;
    background: url('/img/common/bg_checkbox_chk.png') no-repeat 0 0;
    background-size: contain;
    opacity: 0;
}
.form-check input[type=checkbox]:checked ~ label:before {
    background-color: var(--prime);
    border-color: var(--prime);
}
.form-check input[type=checkbox]:checked ~ label:after {
    opacity: 1;
    transition-delay: 0.2s;
}
.form-check input[type=checkbox]:disabled ~ label:before {
    border-color: #C6C6C6;
    background-color: #E4E4E4;
}
.form-check input[type=radio]:focus ~ label, .form-check input[type=checkbox]:focus ~ label {
    outline-offset: 0.4rem;
    outline: 2px solid rgba(36, 107, 235, 0.8);
}
.form-check.ico-only {
    display: inline-flex;
    vertical-align: middle;
}
.form-check.ico-only > [type=checkbox] ~ label {
    padding-left: 16px !important;
}
.form-check.ico-only > [type=radio] ~ label {
    padding-left: 20px !important;
}
.check-only {
    height:20px;
}
.check-only input[type=checkbox] ~ label,
.check-only input[type=radio] ~ label {
    position: relative;
    display: inline-flex;
    min-height: 20px;
    width: 20px;
    font-size: 20px;
    line-height: 20px;
}
.check-only input[type=checkbox] ~ label:before, 
.check-only input[type=checkbox] ~ label:after,
.check-only input[type=radio] ~ label:before, 
.check-only input[type=radio] ~ label:after {
    position: absolute;
    top: calc((20px - 20px) / 2);
    left: calc((20px - 20px) / 2);
    display: block;
    content: "";
    transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.check-only input[type=checkbox] ~ label:before {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 1px solid #717171;
    border-radius:4px;
}
.check-only input[type=radio] ~ label:before {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 1px solid #717171;
    border-radius:50%;
}
.check-only input[type=checkbox] ~ label:after {
    width: 20px;
    height: 20px;
    background: url(/img/common/bg_checkbox_chk.png) no-repeat 0 0;
    background-size: contain;
    opacity: 0;
}
.check-only input[type=checkbox]:checked ~ label:before {
    background-color: var(--prime);
    border-color: var(--prime);
}
.check-only input[type=checkbox]:checked ~ label:after {
    opacity: 1;
    z-index: 3;
}
.check-only input[type=radio] ~ label:after {
    position: absolute;
    top:5px;
    left:5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0;
}
.check-only input[type=radio]:checked ~ label:after {
    background-color: var(--prime);
    opacity: 1;
}
.check-only input[type=radio]:focus ~ label, 
.check-only input[type=checkbox]:focus ~ label {
    outline-offset: 0.4rem;
    outline: 2px solid rgba(36, 107, 235, 0.8);
}
.chk-group-area > * {
    width: 100%;
}
.chk-group-area .chk-all-wrap {
    color: #1D1D1D;
}
.chk-group-area .chk-all-wrap .form-group {
    width: auto;
}
.chk-group-area .chk-group-wrap {
    gap: 24px;
}
.chk-group-area .chk-group-wrap > li {
    gap: 24px;
    width: 100%;
    padding: 24px;
    border: 1px solid #C6C6C6;
    border-radius: var(--krds-rd-12);
    transition: 0.4s ease-in-out;
}
.chk-group-area .chk-group-wrap > li .btn {
    color: #1D1D1D;
}
.chk-group-area .chk-group-wrap > li.checked {
    border-color: var(--prime);
}
.chk-group-area .chk-group-wrap > li.disabled {
    background-color: var(--krds-gray-5);
    border-color: #D8D8D8;
}
.chk-group-area .chk-group-wrap > li.disabled .btn {
    color: #8E8E8E;
}
.chk-group-area .chk-group-wrap > li.disabled .btn.btn-txt.ico-arr::after {
    background-image: url(../../img/component/common/ico_arr_20_right_disabled.svg);
    background-position: center;
    background-size: 1.6rem;
}
.chk-group-area .chk-group-wrap input[type=radio] + label, .chk-group-area .chk-group-wrap input[type=checkbox] + label {
    flex-direction: column;
    width: 100%;
    padding-left: 4.4rem;
}
.chk-group-area .chk-group-wrap input[type=radio] + label .tit, .chk-group-area .chk-group-wrap input[type=checkbox] + label .tit {
    font-weight: 700;
    color: #1D1D1D;
}
.chk-group-area .chk-group-wrap input[type=radio] + label .tit + .conts-desc, .chk-group-area .chk-group-wrap input[type=checkbox] + label .tit + .conts-desc {
    margin-top: 16px;
}
.chk-group-area .chk-group-wrap input[type=radio]:disabled + label, .chk-group-area .chk-group-wrap input[type=checkbox]:disabled + label {
    color: #8E8E8E;
}
.chk-group-area .chk-group-wrap input[type=radio]:disabled + label .tit, .chk-group-area .chk-group-wrap input[type=checkbox]:disabled + label .tit {
    color: inherit;
}
.chk-group-area .chk-group-wrap .btn-wrap {
    width: initial;
    margin-left: 4.4rem;
}
.is-error .form-control {
    border-color: #E71825;
    border-width: 2px;
}
.form-info-txt {
    font-size:17px;
    color:var(--gry);
}
.form-info-txt::before {
    display: inline-flex;
    content:'';
    margin-right:10px;
    width:18px;
    height:20px;
    vertical-align: text-top;
    background: url('/img/common/ico_caution.png') no-repeat center;
}


/* select */
.form-select {
    width: 100%;
    height: 48px;
    padding: 0 45px 0 19px;
    background-color: #fff;
    background-image: url('../img/common/ico_select_lg.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 16px) center;
    border: 1px solid #717171;
    border-radius: 8px;
    font-family: inherit;
    font-size: 19px;
    color: #1d1d1d;
    opacity: 1;
}
.form-select.small {
    height:40px;
}
.form-select.large {
    min-width: 240px;
    height:56px;
}
.form-select:focus {
    border-width: 2px;
    border-color:var(--prime);
    outline-offset: -.5rem;
}
.form-select[disabled] {
    background-color: #D8D8D8;;
    border-color: #C6C6C6;
    color: #1D1D1D;
}
.form-select.error {
    border-color: #EC4651;
    border-width: 2px;
}
.form-select option:hover {
    background-color: #198754;
    color: #fff;
}
@media (max-width: 767px) {
    .form-select {
        padding:0 15px;
        min-width: 120px;
        height: 40px;
        font-size:15px;
    }
    .form-select.small {
        padding:0 10px;
        height:32px;
        font-size:13px;
    }
    .form-select.large {
        padding:0 20px;
        min-width:110px;
        height:50px;
        font-size:17px;
    }
    .form-control.large {
        padding:0 20px;
        min-width: auto;
        height:50px;
        font-size:17px;
    }
}

.search-form {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap:10px;
    margin-top:6px;
}
.search-form select {
    width:auto;
}
.search-form .form-control {
    width: 100%;
}

.sch-input {
    display: flex;
	position: relative;
}
.sch-input .form-control {
    padding: 0 48px 0 16px;
}
.sch-input .form-control ~ .ico-sch {
    width: 24px;
    height: 24px;
}
.sch-input .ico-sch {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

/* file upload */
.file-upload {
    position: relative;
}
.file-upload .act-upload {
    padding:13px;
    font-size:17px;
    color:var(--gry);
    text-align: center;
    border:1px dashed #99b0cb;
    border-radius: 8px;
    background-color: #edf1f5;
}
.file-upload label {
    display: block;
}
.file-upload input[type=file]:focus + label {
    outline-offset: -0.40px;
    outline: 2px solid rgba(36, 107, 235, 0.8);
}
.file-upload .act-upload.dragover {
    border-color: #0066cc;
    background-color: #f0f8ff;
}
.file-upload .act-upload > span {
    vertical-align: middle;
}
.file-upload .act-upload > span::before{
    display: inline-block;
    content:'';
    margin-right: 10px;
    vertical-align: top;
    width: 20px;
    height:20px;
    background: url('/img/common/ico_upload.png') no-repeat center;
    background-size: contain;
}
.file-name {
    position: absolute;
    top:0;
    left:0;
    display:none;
    width:100%;
    height:100%;
    padding: 10px 36px 10px 16px;
    border-radius: 8px;
    border: 1px solid #d8d8d8;
    background-color: var(--wht);
}
.file-name.on {
    display: block;
}
.file-name a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-name .del-file {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 901;
    width: 12px;
    height: 12px;
    background: url("/img/common/ico_close_modal.png") no-repeat center;
    background-size: 12px;
}
@media (max-width: 767px) {
    .file-upload .act-upload {
        padding:9px 3px;
        font-size:15px;
    }
    .file-upload .act-upload > span::before {
        width:18px;
        height:18px;
    }
    .sch-input .form-control ~ .ico-sch {
        right:0;
    }
    
}

.sort {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap:4px;
    position: relative;
    padding:20px 0;
    width: 100%;
}
.sort .btn-sort {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    position: relative;
    white-space: nowrap;
    padding: 8px 0;
    width: auto;
    min-width: 68px;
    font-size:15px;
    font-weight: 400;
    color:var(--sec);
    border: 1px solid var(--sec);
    border-radius: 6px;
}
.sort .btn-sort:hover {
    background-color: #d4d9df;
}
.sort .btn-sort.active {
    color:var(--wht);
    background-color:var(--sec);
}
.sort .btn-sort.active:hover {
    background-color:#0a294e;
}


/* modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
}
.modal-back, .modal {
    display: none;
    visibility: hidden;
    z-index: -1;
}
.modal-back.in, .modal.in {
    visibility: visible;
}
.modal.shown {
    display: block;
}
.modal.in {
    z-index: 99;
    transition-delay:0;
    opacity: 1;
}
.modal-back.in {
    display: block;
    z-index: 98;
}
.modal > * {
    width: 100%;
}
.modal-back {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.modal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    position: relative;
    z-index: 1020;
    width: 100%;
    max-width: 760px;
    height: calc(100% - 80px* 2);
    min-height: calc(100% - 80px* 2);
    margin: 80px auto;
}
.modal .modal-dialog.sm {
    max-width:360px;
}
.modal .modal-dialog.md {
    max-width:560px;
}
.modal .modal-dialog .modal-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-height: 100%;
    background-color: var(--wht);
    border-radius: 12px;
    border:1px solid #d8d8d8;
    outline-color: transparent;
    transition: outline-color 0.1s;
}
.modal .modal-dialog .modal-header {
    padding:37px 40px 27px;
    width: 100%;
    background-color: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.modal .modal-dialog.sm .modal-header {
    /* padding:20px; */
}
.modal .modal-dialog .modal-header .modal-title {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size:17px;
    font-weight: 700;
}
.modal .modal-dialog .modal-conts {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 32px;
    position: relative;
    overflow-y: auto;
    width: 100%;
    padding: 0 40px;
    color: var(--blk);
}
.modal .modal-dialog.sm .modal-conts {
    /* padding:0 20px; */
}
.modal .modal-dialog .modal-conts .conts-tit {
    font-size:19px;
    font-weight: 700;
}
.modal .modal-dialog .modal-conts .conts-area {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 32px;
}
.modal .modal-dialog .btn-close {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 901;
    width: 20px;
    height: 20px;
    background: url("/img/common/ico_close_modal.png") no-repeat center;
    background-size: 20px;
}
.modal .modal-dialog.sm .btn-close {
    top:20px;
    right:20px;
}
.modal .modal-dialog .modal-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    margin-top:0;
    width: 100%;
    padding:27px 40px;
}
.modal .modal-dialog.sm .modal-btn {
    padding:20px;
}