@charset "utf-8";
/* font-set */


@font-face {
    font-family: 'PretendardGOV';
    src: url('font/PretendardGOV-Regular.woff2') format('woff2');
    font-weight: normal;
}

@font-face {
    font-family: 'PretendardGOV';
    src: url('font/PretendardGOV-Bold.woff2') format('woff2');
    font-weight: bold;
}

:root {
    /* chart_color */
    --chart-dark: #2d353c;
    --chart-light: #f2f3f4;
    --chart-blue: #348fe2;
    --chart-indigo: #8753de;
    --chart-purple: #727cb6;
    --chart-pink: #fb5597;
    --chart-red: #ff5b57;
    --chart-orange: #f59c1a;
    --chart-yellow: #ffd900;
    --chart-green: #32a932;
    --chart-success: #00acac;
    --chart-teal: #00acac;
    --chart-lime: #90ca4b;
    --chart-cyan: #49b6d6;
    --chart-white: #FFFFFF;
    --chart-gray: #6c757d;
    --chart-gray2: #e5e5e5;
    --chart-komis-blue1: #007eff;
    --chart-komis-blue2: #2e96ff;
    --chart-komis-blue3: #6ab4ff;
    --chart-komis-blue4: #89c3ff;
    --chart-komis-blue5: #abd2ff;
    --chart-color-rgb: 25, 27, 28;
    --chart-body-font-family:  'PretendardGOV', 'Montserrat', sans-serif, serif;
    --chart-yaxis-title-font-family:  'PretendardGOV', 'PretendardGOV-Ragular', sans-serif, serif;
    /*--chart-body-font-size: 0.75rem;*/
    --chart-component-color: #191b1c;

    /* color-set */
    --gray-scale-0: #ffffff;
    --gray-scale-5: #f6f6f6;
    --gray-scale-10: #f0f0f0;
    --gray-scale-20: #e5e5e5;
    --gray-scale-30: #d5d5d5;
    --gray-scale-40: #c6c6c6;
    --gray-scale-50: #949494;
    --gray-scale-60: #767676;
    --gray-scale-70: #5e5e5e;
    --gray-scale-80: #333333;
    --gray-scale-90: #222222;
    --gray-scale-100: #000000;

    --primary-5: #f0f3fa;
    --primary-10: #c3d0ee;
    --primary-20: #7a97dc;
    --primary-30: #517bdc;
    --primary-40: #295cd0;
    --primary-50: #2149a6;
    --primary-60: #173373;
    --primary-70: #102451;
    --primary-80: #0a1633;
    --primary-90: #050b19;

    --secondary-5: #f4f7fa;
    --secondary-10: #c7ddf4;
    --secondary-20: #9ed3fa;
    --secondary-30: #47a7eb;
    --secondary-40: #0086e6;
    --secondary-50: #0077cc;
    --secondary-60: #005599;
    --secondary-70: #003b66;
    --secondary-80: #002d4d;
    --secondary-90: #001e33;

    --alpha-10:#0000001a;
    --alpha-30:#0000004d;
    --alpha-45:#00000073;
    --alpha-65:#000000a6;
    --alpha-85:#000000d9;

    --point-5:#ffeff2;
    --point-10:#febdc7;
    --point-20:#fe8a9c;
    --point-30:#fe5771;
    --point-40:#f71235;
    --point-50:#ed0226;
    --point-60:#ba021e;
    --point-70:#920117;
    --point-80:#640110;
    --point-90:#370009;

    --danger-5:#fff3f3;
    --danger-10:#facdcb;
    --danger-20:#f6a09c;
    --danger-30:#f05d55;
    --danger-40:#ee463e;
    --danger-50:#e51e14;
    --danger-60:#bb140b;
    --danger-70:#87120c;
    --danger-80:#5f0601;
    --danger-90:#2f000c;

    --warning-5:#fff4e2;
    --warning-10:#ffe2c6;
    --warning-20:#ffd4ac;
    --warning-30:#ffc793;
    --warning-40:#ffad60;
    --warning-50:#ff932d;
    --warning-60:#ad5400;
    --warning-70:#934700;
    --warning-80:#602e00;
    --warning-90:#411f00;

    --success-5:#ebf9ef;
    --success-10:#cee9d4;
    --success-20:#b2dcbb;
    --success-30:#8cca99;
    --success-40:#33a14b;
    --success-50:#118831;
    --success-60:#14712d;
    --success-70:#005312;
    --success-80:#00370c;
    --success-90:#002207;

    --information-5:#e7f2fd;
    --information-10:#d0e2ff;
    --information-20:#94bdfe;
    --information-30:#76abfd;
    --information-40:#4a8ef5;
    --information-50:#2672e6;
    --information-60:#0c54c2;
    --information-70:#173e99;
    --information-80:#0c1f4d;
    --information-90:#040a1a;

    --white: var(--gray-scale-0);
    --box-border: var(--gray-scale-30);
    --primary: var(--secondary-50);
    --primary-light: var(--secondary-40);
    --primary-dark: var(--secondary-60);
    --text: var(--gray-scale-90);
    --light-txt: var(--gray-scale-50);
    --dark-txt: var(--gray-scale-100);
    --strong-txt: var(--gray-scale-100);
    --bg-footer: var(--gray-scale-0);
    --light-gray: var(--gray-scale-5);
    --gray: var(--gray-scale-30);
    --red: var(--point-50);
    --orange: var(--warning-50);
    --green: var(--success-50);
    --sky: var(--information-50);
    --red-light:  var(--danger-5);
    --orange-light: var(--warning-5);
    --green-light: var(--success-5);
    --sky-light: var(--information-5);
    --red-dark: var(--danger-60);
    --orange-dark: var(--warning-60);
    --green-dark: var(--success-60);
    --sky-dark: var(--information-60);

    --bg-0:var(--gray-scale-0);
    --bg-1:var(--gray-scale-5);
    --bg-2:var(--secondary-5);
    --bg-3:var(--information-5);

    --stroke-0: var(--gray-scale-10);
    --stroke-1: var(--gray-scale-20);
    --stroke-2: var(--gray-scale-30);
    --stroke-3: var(--gray-scale-40);
    --stroke-4: var(--gray-scale-50);
    --stroke-5: var(--gray-scale-60);
    --stroke-focus: var(--secondary-50);

    --text-0: var(--gray-scale-100);
    --text-1: var(--gray-scale-90);
    --text-2: var(--gray-scale-70);

    --danger-surface: var(--danger-5);
    --danger-border: var(--danger-10);
    --danger-base: var(--danger-50);
    --danger-text: var(--danger-60);

    --warning-surface: var(--warning-5);
    --warning-border: var(--warning-10);
    --warning-base: var(--warning-50);
    --warning-text: var(--warning-60);

    --success-surface: var(--success-5);
    --success-border: var(--success-10);
    --success-base: var(--success-50);
    --success-text: var(--success-60);

    --information-surface: var(--information-5);
    --information-border: var(--information-10);
    --information-base: var(--information-50);
    --information-text: var(--information-60);

    --ck-color-base-border: #CED1D8;
    --app-component-dropdown-bg: #ffffff;
    --app-component-color : #777777;
    --bs-light: #ffffff;
    --app-component-border-color:  #CED1D8;
    --app-component-color-rgb: 184,187,193;

    --bright: #EAEEFC;
    --text-dark: #636363;

    /* text-set */
    --display-lg: bold 4.13em/150% 'Pretendard-Bold', sans-serif;
    --display-md: bold 3.13em/150% 'Pretendard-Bold', sans-serif;
    --display-sm: bold 2.5em/150% 'Pretendard-Bold', sans-serif;

    --heading-lg: bold 3.13em/150% 'Pretendard-Bold', sans-serif;
    --heading-md: bold 2.5em/150% 'Pretendard-Bold', sans-serif;
    --heading-sm: bold 2em/150% 'Pretendard-Bold', sans-serif;

    --title-2xl: bold 2em/150% 'PretendardGOV', sans-serif;
    --title-xl: bold 1.56em/150% 'PretendardGOV', sans-serif;
    --title-lg: bold 1.31em/150% 'PretendardGOV', sans-serif;
    --title-md: bold 1.19em/150% 'PretendardGOV', sans-serif;
    --title-sm: bold 1.06em/150% 'PretendardGOV', sans-serif;
    --title-xs: 0.94em/150% 'PretendardGOV', sans-serif;

    --body-lg: 1.19em/150% 'Pretendard-Light', sans-serif;
    --body-md: 1.06em/150% 'Pretendard-Light', sans-serif;
    --body-sm: 0.94em/150% 'Pretendard-Light', sans-serif;
    --body-lg-b: bold 1.19em/150% 'Pretendard-Bold', sans-serif;
    --body-md-b: bold 1.06em/150% 'Pretendard-Bold', sans-serif;
    --body-sm-b: bold 0.94em/150% 'Pretendard-Bold', sans-serif;

    --detail-lg: 1.06em/150% 'PretendardGOV', sans-serif;
    --detail-md: 0.94em/150% 'PretendardGOV', sans-serif;
    --detail-sm: 0.81em/150% 'PretendardGOV', sans-serif;
    --detail-lg-b: bold 1.06em/150% 'PretendardGOV', sans-serif;
    --detail-md-b: bold 0.94em/150% 'PretendardGOV', sans-serif;
    --detail-sm-b: bold 0.81em/150% 'PretendardGOV', sans-serif;

    --label-lg: 1.19em/150% 'PretendardGOV', sans-serif;
    --label-md: 1.06em/150% 'PretendardGOV', sans-serif;
    --label-sm: 0.94em/150% 'PretendardGOV', sans-serif;
    --label-xs: 0.81em/150% 'PretendardGOV', sans-serif;
    --label-lg-b: bold 1.19em/150% 'PretendardGOV', sans-serif;
    --label-md-b: bold 1.06em/150% 'PretendardGOV', sans-serif;
    --label-sm-b: bold 0.94em/150% 'PretendardGOV', sans-serif;
    --label-xs-b: bold 0.81em/150% 'PretendardGOV', sans-serif;

    --links-lg: 1.19em/150% 'PretendardGOV', sans-serif;
    --links-md: 1.06em/150% 'PretendardGOV', sans-serif;
    --links-sm: 0.94em/150% 'PretendardGOV', sans-serif;
    --links-lg-b: bold 1.19em/150% 'PretendardGOV', sans-serif;
    --links-md-b: bold 1.06em/150% 'PretendardGOV', sans-serif;
    --links-sm-b: bold 0.94em/150% 'PretendardGOV', sans-serif;

    --spacing-1: 0.13em;
    --spacing-2: 0.25em;
    --spacing-3: 0.5em;
    --spacing-4: 0.75em;
    --spacing-5: 1em;
    --spacing-6: 1.25em;
    --spacing-7: 1.5em;
    --spacing-8: 2em;
    --spacing-9: 2.5em;
    --spacing-10: 2.75em;
    --spacing-inner: 75px;
    --spacing-inner-r: -75px;
    --spacing-modal: var(--spacing-9);
}

/* common */
body {
    font-family: 'PretendardGOV', 'Montserrat', sans-serif, serif;
    font-size: 16px;
    color: var(--strong-txt);
    padding-top:186px;
}

* {
    /*word-break: keep-all;*/
    box-sizing: border-box;
}

*::-webkit-scrollbar {
    -webkit-appearance: none;
}

*::-webkit-scrollbar:vertical {
    width: 7px;
}

*::-webkit-scrollbar:horizontal {
    height: 8px;
}

*::-webkit-scrollbar-track {
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--box-border);
    border-radius: 10px;
    border: 1px solid var(--white);
}

ul,
ol,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    font: var(--body-md);
}

.word-keep {
    word-break: keep-all;
}
.word-break {
     word-break: break-all;
}

a {
    text-decoration: none;
    color: var(--gray-scale-60);
    border-radius: 5px;
}
a:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
.a-under {
    cursor: pointer;
}
.a-under:hover {
    text-decoration: underline;
}

hr {
    border: 0;
    border-top: 1px solid var(--stroke-2);
}

/* ------------------------------------- input start ------------------------------------- */

button,
input[type="submit"],
input[type="button"] {
    border: 0;
    cursor: pointer;
}

button {
    background-color: unset;
}

fieldset {
    border: 0;
    padding: 0;
}

/*select,*/
/*input,*/
/*textarea {*/
/*    transition: all .2s ease;*/
/*}*/

/*select:focus-visible,*/
/*textarea:focus-visible,*/
/*input:not([type="button"], [type="submit"]):focus-visible {*/
/*    outline: 0;*/
/*    box-shadow: 0 0 10px rgba(57, 113, 255, .3);*/
/*    background-color: var(--white);*/
/*}*/

select::-ms-expand {
    display: none;
    /*for IE10,11*/
}

select {
    -webkit-appearance: none;
    /* for chrome */
    -moz-appearance: none;
    /*for firefox*/
    appearance: none;
    background: var(--white) url('../_images/select_item.PNG') no-repeat calc(100% - 4px) center;
    background-size: 20px;
    padding: var(--spacing-2) var(--spacing-3);
    padding-right: 34px;
    font: var(--body-md);
    color: var(--gray-scale-100);
    border-radius: var(--spacing-3);
    border:1px solid var(--stroke-2);
    cursor: pointer;
    /*min-width: 120px;*/
    min-width: 100px;
    font:var(--label-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}
select:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}

/* radio & check */
.input-contents {
    /*flex: 1 1 30%;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 100%;
}
input[type="radio"],
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}
label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
    position: relative;
    cursor: pointer;
    padding-left: 26px;
    padding-right: var(--spacing-2);
    border-radius: var(--spacing-2);
    white-space: nowrap;
}

label:has(input[type="checkbox"]:focus-visible), label:has(input[type="radio"]:focus-visible) {
    outline: 3px dashed var(--gray-scale-100);
}

/* radio */

.input-radio {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0; left: 0;
    width: 20px; height: 20px;
    border: 1px solid var(--stroke-5);
    background-color: var(--secondary-20);
    border-radius: 50%;
    transition:all .2s ease;
    font: var(--body-md);
    overflow: hidden;
}
.input-radio::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    background-color: var(--gray-scale-0);
    border-radius: 50%;
    transition:all .2s ease;
}
label:has(input[type="radio"]):hover .input-radio::after {
    width: 12px; height: 12px;
}

input[type="radio"]:checked + .input-radio {
    background-color: var(--secondary-50);
}
input[type="radio"]:checked + .input-radio::after {
    width: 8px; height: 8px;
}

input[type="radio"]:focus-visible + .input-radio {
    outline: 3px dashed var(--gray-scale-100);
}

/* check */

.input-check {
    width: 20px;
    height: 20px;
    display: flex;
    padding: 4px;
    justify-content: center;
    position: absolute;
    top: 2px; left: 0;
    background: var(--gray-scale-0);
    border-radius: var(--spacing-2);
    border:1px solid var(--stroke-5);
    transition: all .2s ease;
}
.input-check::after {
    content: '';
    display: block;
    width: 0; height: 0;
    border-bottom: 2px solid var(--gray-scale-0);
    border-left: 2px solid var(--gray-scale-0);
    transform: rotate(-45deg);
}
label:has(input[type="checkbox"]:checked) .input-check {
    background: var(--secondary-50);
}
label:has(input[type="checkbox"]):hover .input-check {
    background-color: var(--secondary-20);
}
label:has(input[type="checkbox"]):hover .input-check::after {
    animation-name: checking;
    animation-duration: .3s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
label:has(input[type="checkbox"]:checked) .input-check::after {
    width: 16px; height: 4px;
}
label:has(input[type="checkbox"]:focus-visible) .input-check {
    outline: 3px dashed var(--gray-scale-100);
}
label:has(input[type="checkbox"]:checked) .input-check::after {
    width: 25px; height: 5px;
}
label:has(input[type="checkbox"]:checked):hover .input-check {
    background-color: var(--secondary-50);
}
label:has(input[type="checkbox"]:checked):hover .input-check::after {
    animation: none;
}


@keyframes checking {
    0% {
        width: 0; height: 0;
    }
    5% {
        width: 0; height: 4px;
    }
    100% {
        width: 16px; height: 4px;
    }
}
/* input-chip */
.input-chip-wrap {
    display: flex;
    flex-wrap:wrap;
    gap: var(--spacing-4) var(--spacing-3);
    padding-bottom:5px;
}
.input-chip-wrap label:has(input) {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap:var(--spacing-3);
    width: fit-content;
    font: var(--body-md);
    color: var(--gray-scale-100);
    padding: var(--spacing-2) var(--spacing-3)!important;
    border-radius: var(--spacing-3);
    border-style: solid;
    border-width: 1px;
    border-color: var(--stroke-2);
    background-color: var(--gray-scale-0);
    font:var(--label-sm);
}
.input-chip-wrap label:has(input:checked) {
    border-color: var(--secondary-50);
    background-color: var(--secondary-5);
    outline-offset: 2px;
    outline: 3px solid var(--secondary-50);
}
.input-chip-wrap label:has(input:checked)::before {
    border-color: var(--secondary-50);
}
.input-chip-wrap label::before {
    content: '';
    display: inline-block;
    margin-left: var(--spacing-3);
    width: 0.8em;
    height: 0.4em;
    border-style: solid;
    border-width: 0 0 2px 2px;
    border-color: var(--stroke-5);
    transform: rotate(-45deg) translateY(-6px);
}
.input-chip-wrap label:has(input:focus-visible) {
    outline: 3px dashed var(--gray-scale-100);
}
.input-chip-wrap label:has(input:hover) {
    background-color: var(--gray-scale-5);
}
.input-chip-wrap label:has(input:checked:hover) {
    background-color: var(--secondary-10);
    border-color: var(--secondary-60);
}
.input-chip-wrap label:has(input:checked:hover)::after {
    border-color: var(--secondary-60);
}
.input-chip-wrap label:has(input:checked):active {
    background-color: var(--secondary-20);
    border-color: var(--secondary-70);
}
.input-chip-wrap label:has(input:checked):active::after {
    border-color: var(--secondary-70);
}
.input-chip-wrap label:has(input):active {
    background-color: var(--gray-scale-20);
    border-color: var(--stroke-2);
}
/*select*/

.select-wrap {
    position: relative;
    min-width: 180px;
}
.select-custom .select-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: var(--spacing-3) var(--spacing-5);
    border-width: 1px;
    border-style: solid;
    border-color: var(--stroke-2);
    background-color: var(--gray-scale-0);
    border-radius: var(--spacing-3);
    font: var(--body-md);
    color: var(--gray-scale-100);
}
.select-custom .select-btn:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
.select-option-list-wrap {
    position: absolute;
    top: calc(100% + var(--spacing-2));
    padding: var(--spacing-4) var(--spacing-5);
    border-width: 1px;
    border-style: solid;
    border-color: var(--stroke-2);
    background-color: var(--gray-scale-0);
    border-radius: var(--spacing-3);
    width: 100%;
    z-index: 2;
}
.select-option-list-wrap .input-text {
    margin-bottom: var(--spacing-3);
}
.select-option-list {
    display: flex;
    max-height: 160px;
    overflow-y: auto;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
}
.select-option-list li, .select-option-list li label {
    width: 100%;
    display: block;
}

/* text-input */
input[type="text"], input[type="password"], input[type="date"]  {
    width: 100%;
    max-width: 100%;
    font: var(--label-sm);
    color: var(--gray-scale-100);
    border-width: 1px;
    border-style: solid;
    border-color: var(--stroke-2);
    background-color: var(--gray-scale-0);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--spacing-3);
}
.input-huge {
    padding: var(--spacing-3) var(--spacing-4)!important;
    font: var(--body-md)!important;
}
input[type="text"]:focus-visible, input[type="password"]:focus-visible, input[type="date"] {
    outline: 0;
}
input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="date"]::placeholder {
    color: var(--gray-scale-60);
}
.input-danger input[type="text"], .input-danger input[type="password"], .input-danger input[type="date"] {
    border-color: var(--danger-50)!important;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus {
    box-shadow: none;
    border-color: var(--gray-scale-100)!important;
}
input[type="text"]:disabled, input[type="password"]:disabled, input[type="date"]:disabled {
    background-color: var(--gray-scale-20);
    color: var(--gray-scale-50);
    border-color: var(--gray-scale-50)!important;
}
input[type="text"]:disabled + .input-text-btn, input[type="password"]:disabled + .input-text-btn, input[type="date"]:disabled + .input-text-btn {
    color: var(--gray-scale-50);
}
.input-text {
    position: relative;
    width: 100%;
}
.input-text .input-text-btn {
    position: absolute;
    font: var(--body-lg);
    color:var(--gray-scale-100);
    top: var(--spacing-3);
    right: var(--spacing-4);
    line-height: 130%;
}
/* input-has-title */
.input-has-title label {
    position: absolute;
    bottom: var(--spacing-3);
    left: var(--spacing-5);
    color: var(--gray-scale-60);
    font: var(--body-md);
    transition: all .2s ease;
}
.input-has-title:has(input:focus) label, .input-has-title:has(input:valid) label {
    bottom: 100%;
    left:0;
    font: var(--body-sm);
}
.input-has-title input[type="text"], .input-has-title input[type="password"] {
    border-width: 0 0 1px 0;
    border-radius: 0;
}
.input-has-title input[type="text"]:valid, .input-has-title input[type="password"]:valid {
    border-color: var(--gray-scale-100);
}
.input-text-log {
    display: flex;
    gap: var(--spacing-2);
    font: var(--body-sm);
    margin-top: var(--spacing-3);
    line-height: 130%;
    color: var(--gray-scale-60);
}
.input-text-log::before {
    content: '\f05a';
    font-family: 'Font Awesome 6 Free';
    line-height: 120%;
    font-weight: 900;
    color: var(--gray-scale-50);
}
.input-danger .input-text-log, .input-danger + .input-text-log {
    color: var(--danger-text);
}
.input-danger .input-text-log::before, .input-danger + .input-text-log::before {
    color: var(--danger-base);
}
.input-information .input-text-log, .input-information + .input-text-log {
    color: var(--information-text);
}
.input-information .input-text-log::before, .input-information + .input-text-log::before {
    color: var(--information-base);
}
.input-success .input-text-log, .input-success + .input-text-log {
    color: var(--success-text);
}
.input-success .input-text-log::before, .input-success + .input-text-log::before {
    color: var(--success-base);
}
.input-warning .input-text-log, .input-warning + .input-text-log {
    color: var(--warning-text);
}
.input-warning .input-text-log::before, .input-warning + .input-text-log::before {
    color: var(--warning-base);
}


.input-text-count {
    width: 100%;
    text-align: right;
}
.input-text-count {
    color: var(--gray-scale-60);
}
.input-text-count .count {
    color:var(--secondary-50);
}

/* progress */
.progress-bar {
    appearance: none;
    position: relative;
    width: 100%;
    height: var(--spacing-3);
}
.bar-bold {
    height: 35px;
}
.progress-bar::-webkit-progress-bar {
    background-color: var(--gray-scale-30);
    border-radius: var(--spacing-3);
    overflow: hidden;
}
.progress-bar[data-color = "pink"]::-webkit-progress-value {
    background-color: #FF89AD;
}
.progress-bar[data-color = "blue"]::-webkit-progress-value {
    background-color: #147AD6;
}
.progress-bar[data-color = "sky"]::-webkit-progress-value {
    background-color: #78D2DE;
}
.progress-bar[data-color = "purple"]::-webkit-progress-value {
    background-color: #978FED;
}
.progress-bar[data-color = "green"]::-webkit-progress-value {
    background-color: #2F837C;
}
.bar-has-label::before {
    content: attr(data-label);
    font: var(--label-sm);
    color: var(--gray-scale-0);
    position: absolute;
    top: 50%; left: var(--spacing-4);
    transform: translateY(-50%);
}
/* ------------------------------------- input-end ------------------------------------- */

/* ------------------------------------- label-start ------------------------------------*/
/* label */
.label {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap:var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--spacing-2);
    font: var(--label-xs-b);
    line-height: 1;
}
.label-min {
    min-width: 90px;
}
.label-warning {
    background-color: #FFF4E2;
    color: #AD5400;
}
.label-success {
    background-color: #EBF9EF;
    color: #14712D;
}
.label-information {
    background-color: #E7F2FD;
    color: #0C54C2;
}
.label-danger {
    background-color: #FFF3F3;
    color: #BB140B;
}
.label-line {
    background-color: var(--gray-scale-0);
    color: var(--secondary-50);
    border-radius: var(--spacing-10);
    border: 2px solid var(--secondary-50);
}
.label-primary {
    background-color: var(--primary-50);
    color: var(--gray-scale-0);
    border-radius: var(--spacing-10);
}
.label-down {
    position: relative;
    display: inline-block;
    padding-left: var(--spacing-6);
    font:var(--label-md-b);
    color:var(--information-text);
    white-space: nowrap;
}
.label-zero {
    position: relative;
    display: inline-block;
    padding-left: var(--spacing-6);
    font:var(--label-md-b);
    color:var(--gray-scale-70);
    white-space: nowrap;
}
.label-down::before {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-25%);
    font-family: 'Font Awesome 6 Free';
    font-size: 1.5em;
    content: '\f0dd';
}
.label-up {
    position: relative;
    display: inline-block;
    padding-left: var(--spacing-6);
    font:var(--label-md-b);
    color:var(--danger-text);
    white-space: nowrap;
}
.label-up::before {
    position: absolute;
    left: 0;
    top: 4px;
    font-family: 'Font Awesome 6 Free';
    font-size: 1.5em;
    content: '\f0d8';
}
/* tag-btn */
.tag-btn {
    display: inline-block;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--spacing-3);
    font: var(--label-sm);
    background-color: #E7F2FD;
    color: #0C54C2;
}
.tag-btn a {
    margin-left: var(--spacing-3);
    color: #0C54C2;
}
.tag-btn:hover {
    background-color: #D0E2FF;
}
.tag-btn:has(a:active), .tag-btn:active {
    background-color: #94BDFE;
}
.tag-btn a:focus-visible {
    outline: 0;
}
.tag-btn:has(a:focus-visible), .tag-btn:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
/* ------------------------------------- label-end -------------------------------------*/

.mobile-hide {
    display: block;
}
.pc-hide {
    display:none;
}
.inner {
    width: 100%;
    padding-left: var(--spacing-inner);
    padding-right: var(--spacing-inner);
    margin: 0 auto;
    max-width: 1500px;
}

.w-100 {
    width: 100%!important;
}
.table-100 {
    min-height: 100%;
}
.d-block {
    display: block!important ;
}

.h-100 {
    height: 100%!important;
}
.title-hidden {
    text-indent: -9999px;
    position: absolute;
}
.w-auto {
    width: auto!important;
}

.w-fit {
  width: fit-content;
}

/* flex */
.flex-box {
    flex-direction: row;
    display: flex;
    align-items: center;
}
.flex-none {
    flex: none!important;
}
.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-column {
    flex-direction: column;
}

.just-between {
    justify-content: space-between;
}

.just-around {
    justify-content: space-around;
}

.just-center {
    justify-content: center;
}

.just-start {
    justify-content: flex-start;
}

.just-end {
    justify-content: flex-end;
}

.item-stretch {
    align-items: stretch;
}

.item-start {
    align-items: flex-start;
}

.item-end {
    align-items: flex-end;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

.gap-25 {
    gap: 25px;
}

.gap-30 {
    gap: 30px;
}

.gap-35 {
    gap: 35px;
}

.gap-40 {
    gap: 40px;
}


.flex-1-1-20 * {
    flex: 1 1 16%;
}
.flex-1-1-25 * {
    flex: 1 1 20%;
}
.flex-1-1-30 * {
    flex: 1 1 30%;
}
.flex-1-1-40 * {
    flex: 1 1 40%;
}
.row {display: flex; justify-content: space-between;}
.col-1 { width: calc((100%/12) - 16px); }
.col-2 { width: calc((100%/6) - 16px); }
.col-3 { width: calc((100%/4) - 16px); }
.col-4 { width: calc((100%/3) - 16px); }
.col-5 { width: calc((100%/12*5) - 16px); }
.col-6 { width: calc((100%/2) - 16px); }
.col-7 { width: calc((100%/12*7) - 16px); }
.col-8 { width: calc((100%/12*8) - 16px); }
.col-9 { width: calc((100%/12*9) - 16px); }
.col-10 { width: calc((100%/12*10) - 16px); }
.col-11 { width: calc((100%/12*11) - 16px); }
.col-12 { width: 100%; }

/* 간격을 좁힌 버전 */
.col-min-1 { width: calc((100%/12) - 8px); }
.col-min-2 { width: calc((100%/6) - 8px); }
.col-min-3 { width: calc((100%/4) - 8px); }
.col-min-4 { width: calc((100%/3) - 8px); }
.col-min-5 { width: calc((100%/12*5) - 8px); }
.col-min-6 { width: calc((100%/2) - 8px); }
.col-min-7 { width: calc((100%/12*7) - 8px); }
.col-min-8 { width: calc((100%/12*8) - 8px); }
.col-min-9 { width: calc((100%/12*9) - 8px); }
.col-min-10 { width: calc((100%/12*10) - 8px); }
.col-min-11 { width: calc((100%/12*11) - 8px); }
.col-min-12 { width: 100%; }

/* button */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    white-space: nowrap;
    border-radius: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-6);
    cursor: pointer;
    font: var(--body-md);
    margin: 0;
    width: fit-content;
}
.btn.btn-icon {
    padding: var(--spacing-3);
}
.btn-huge {
    padding: var(--spacing-4) var(--spacing-7);
    font: var(--label-lg);
}
.btn-huge.btn-icon {
    padding: var(--spacing-4);
}
.btn-tiny {
    font: var(--label-sm);
    padding: var(--spacing-2) var(--spacing-4);
}
.btn-tiny.btn-icon {
     padding: var(--spacing-2);
}
.btn:focus-visible{
    outline: 3px dashed var(--gray-scale-100);
    outline-offset: 1px;
}
.btn:disabled, .btn.disabled {
    color: var(--gray-scale-50)!important;
    background-color: var(--gray-scale-20)!important;
    border-color: var(--gray-scale-50)!important;
}

.btn-secondary {
    color: var(--gray-scale-0);
    background-color: var(--secondary-50);
}
.btn-primary {
    color: var(--gray-scale-0);
    background-color: var(--primary-50);
}
.btn-gray-light {
    color: var(--gray-scale-100);
    background-color: var(--gray-scale-10);
}
.btn-gray-dark {
    color: var(--gray-scale-0);
    background-color: var(--gray-scale-70);
}
.btn-white {
    color: var(--gray-scale-100);
    background-color: var(--gray-scale-0);
}
.btn-line {
    color: var(--secondary-50);
    background-color: var(--gray-scale-0);
    border: 2px solid var(--secondary-50);
}
.btn-text {
    color: var(--gray-scale-60);
    padding: var(--spacing-1);
    background-color: unset;
    line-height: 1;
}
.btn-link.btn {
    display: inline;
    color: var(--secondary-50);
    padding: var(--spacing-1);
    line-height: 1;
}

.btn-danger {
    background-color: var(--danger-surface);
    color: var(--danger-text);
}

.btn-link.btn span {
    text-decoration:underline;
}

.btn-secondary:hover {
    background-color: var(--secondary-40);
}
.btn-primary:hover {
    background-color: var(--primary-40);
}
.btn-gray-light:hover {
    background-color: var(--gray-scale-0);
}
.btn-gray-dark:hover {
    background-color: var(--gray-scale-60);
}
.btn-white:hover {
    background-color: var(--gray-scale-10);
}
.btn-line:hover {
    color: var(--secondary-60);
    background-color: var(--gray-scale-10);
    border: 2px solid var(--secondary-60);
}
.btn-text:hover {
    background-color: var(--gray-scale-10);
}
.btn-link.btn:hover {
    color: var(--secondary-40);
    text-decoration: underline;
}
.btn-danger:hover {
    background-color: var(--danger-20);
}

.btn-secondary:active {
    background-color: var(--secondary-60);
}
.btn-primary:active {
    background-color: var(--primary-60);
}
.btn-gray-light:active {
    background-color: var(--gray-scale-20);
}
.btn-gray-dark:active {
    background-color: var(--gray-scale-80);
}
.btn-white:active {
    background-color: var(--gray-scale-20);
}
.btn-line:active {
    color: var(--secondary-70);
    background-color: var(--gray-scale-20);
    border: 2px solid var(--secondary-70);
}
.btn-text:active {
    background-color: var(--gray-scale-20);
}
.btn-link.btn:active {
    color: var(--secondary-60);
}
.btn-danger:active {
     background-color: var(--danger-20);
}

/*.btn-link.btn:focus {
    box-shadow: 0 0 10px var(--secondary-20);
}
.btn-danger:focus {
    box-shadow: 0 0 10px var(--danger-30);
}*/
.btn-link.btn:visited {
    color: #5917b8;
}

.btn-wrap-gray {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    gap: var(--spacing-2);
    border-radius: var(--spacing-3);
    padding: var(--spacing-1);
    background-color: var(--gray-scale-10);
}

.btn-wrap-white {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    gap: var(--spacing-2);
    border-radius: var(--spacing-3);
    padding: var(--spacing-1);
    background-color: var(--gray-scale-0);
    border: 1px solid var(--stroke-2);
}
.fa-file-excel {
    line-height: 160%;
}
/* input */
.input-box {
    width: calc(100% - 16px);
    background-color: var(--white);
    padding: 8px;
    border-radius: 2px;
    border: 1px solid var(--box-border);
    color: var(--strong-txt);
}

.input-box.disable {
    background-color: var(--light-gray);
    color: var(--light-txt);
}

.input-box::placeholder {
    color: var(--light-txt);
}

/* badge */
.badge {
    display: inline-block;
    font-size: 0.75em;
    border-radius: 3px;
    padding: 3px 8px;
    max-width: calc(100% - 16px) !important;
    white-space: nowrap;
    line-height: 150%;
}

.badge-huge {
    font-size: 1em;
}

.white-badge {
    background-color: var(--white);
    color: var(--light-txt);
    border: 1px solid var(--light-txt);
}

.primary-badge {
    background-color: var(--primary);
    color: var(--white);
}

.light-badge {
    background-color: var(--primary-light);
    color: var(--white);
}

.red-badge {
    background-color: var(--red);
    color: var(--white);
}

.orange-badge {
    background-color: var(--orange);
    color: var(--white);
}

.yellow-badge {
    background-color: var(--yellow);
    color: var(--dark-txt);
}

.green-badge {
    background-color: var(--green);
    color: var(--white);
}

.sky-badge {
    background-color: var(--sky);
    color: var(--white);
}

.purple-badge {
    background-color: var(--purple);
    color: var(--dark-txt);
}

.pink-badge {
    background-color: var(--pink);
    color: var(--white);
}

.gray-badge {
    background-color: var(--light-txt);
    color: var(--white);
}

.dark-badge {
    background-color: var(--dark-txt);
    color: var(--white);
}

b, strong  {
    font-weight: 700 !important;
}

.text-left {
    text-align: left!important;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

/* -------------------------------------------- popup --------------------------------------------- */
.pop-wrap {
    position: fixed;
    z-index: 999;
    padding: 6.25em 0;
    width: 100%;
    height: 100vh;
}

.pop-wrap::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.pop-box {
    position: relative;
    z-index: 2;
    height: calc(100% - 12.5em);
    margin: 0 auto;
    max-width: calc(100% - 3em);
}

.pop-head {
    background-color: var(--strong-txt);
    color: var(--white);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 7px 7px 0 0;
}

.pop-head .close-btn {
    color: var(--white);
    opacity: 1;
    transition: all .2s ease;
    background-color: unset;
    border: 0;
    cursor: pointer;
    font-size: 1.25em;
}

.pop-head .close-btn:hover {
    opacity: .5;
}

.pop-body {
    padding: 20px;
    overflow: auto;
    max-height: calc(100% - 170px);
    background-color: var(--white);
}

.pop-foot {
    padding: 15px;
    background-color: var(--white);
    border: 1px solid var(--box-line);
    border-radius: 0 0 7px 7px;
}

.pop-full .pop-box {
    width: calc(100% - 3em);
}

.pop-xl .pop-box {
    width: 1500px;
}

.pop-lg .pop-box {
    width: 1080px;
}

.pop-md .pop-box {
    width: 768px;
}

.pop-sm .pop-box {
    width: 560px;
}

.pop-xs .pop-box {
    width: 360px;
}
.pop-text-only {
    position: relative;
    padding: var(--spacing-7);
    min-width: 300px;
    max-width: 480px;
    overflow: hidden;
}
.pop-text-only img {
    width: calc(100% - 10px) !important;
    height: 100% !important;
    max-width: none!important;
    object-fit: cover;
    object-position: center;
    position:absolute;
    top:0; left: 0;
}
.pop-text-only-cnt {
    position: relative;
    z-index: 2;
}

.login-select {
    padding: 15px 0 0;
}

.login-select .callout-box {
    margin-bottom: 30px;
}

.login-sns {
    display: flex;
    align-items: center;
    min-width: 220px;
    max-width: 300px;
    padding-right: 15px;
    border-radius: 3px;
    transition: all .2s ease;
    filter: brightness(1);
    padding-right: 15px;
}

.login-sns .sns-box {
    max-width: 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    border-right: 1px solid rgba(0,0,0,.1);
    margin-right: 15px;
}

.login-sns:hover {
    filter: brightness(0.7);
}

.login-naver {
    background-color: #03c75a;
    color: #fff;
}

.login-kakao {
    background-color: #fae100;
    color: #000;
}
.c{
    position:relative;
}
.absol-wrap {
    position:relative;
}
.absol-item {
    position:absolute;
}
/* ------------------------------------------- call out ------------------------------------------- */
.callout-box {
    border-radius: 8px;
    padding: 15px 2em 15px 1.25em;
    background-color: var(--gray);
    color: var(--text);
    position: relative;
    margin-bottom: 10px;
}

.callout-box .close-btn {
    position: absolute;
    top: 10px;
    right: 1em;
    background-color: unset;
    border: 0;
    transition: all .2s ease;
    cursor: pointer;
}

.callout-box .close-btn:hover {
    opacity: .5;
}

.call-red {
    background-color: var(--red-light);
    color: var(--red-dark);
}

.call-red .close-btn {
    color: var(--red-dark);
}

.call-orange {
    background-color: var(--orange-light);
    color: var(--orange-dark);
}

.call-orange .close-btn {
    color: var(--orange-dark);
}

.call-yellow {
    background-color: var(--yellow-light);
    color: var(--yellow-dark);
}

.call-yellow .close-btn {
    color: var(--yellow-dark);
}

.call-green {
    background-color: var(--green-light);
    color: var(--green-dark);
}

.call-green .close-btn {
    color: var(--green-dark);
}

.call-sky {
    background-color: var(--sky-light);
    color: var(--sky-dark);
}

.call-sky .close-btn {
    color: var(--sky-dark);
}

.call-purple {
    background-color: var(--purple-light);
    color: var(--purple-dark);
}

.call-purple .close-btn {
    color: var(--purple-dark);
}

.call-pink {
    background-color: var(--pink-light);
    color: var(--pink-dark);
}

.call-pink .close-btn {
    color: var(--pink-dark);
}

.contents-danger {
    background-color: var(--danger-surface)!important;
    color: var(--danger-text)!important;
    border:1px solid var(--danger-border)!important;
}
.contents-warning {
    background-color: var(--warning-surface)!important;
    color: var(--warning-text)!important;
    border:1px solid var(--warning-border)!important;
}
.contents-success {
    background-color: var(--success-surface)!important;
    color: var(--success-text)!important;
    border:1px solid var(--success-border)!important;
}
.contents-information {
    background-color: var(--information-surface)!important;
    color: var(--information-text)!important;
    border:1px solid var(--information-border)!important;
}

/* -------------------------------------------- header -------------------------------------------- */
header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2000;
    box-shadow: 0 0 15px #00000026;
}

.nav {
    position: relative;
    z-index: 3;
    /*overflow: auto;*/
    width: 100%;
    padding-right:calc(var(--spacing-inner) * 2 + 16px);
}
.nav > li {
    width: 100%;
}

.nav::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.nav-logo {
    height: 57px;
}
.nav-logo img {
    height: 100%;
    user-select: none;
}

a:focus-visible .nav-logo {
    outline: 3px dashed var(--gray-scale-100);
}

/* .nav li:not(:last-child) a::after {
    content: '';
    display: block;
    width: 1px;
    height: 3px;
    margin-top: 3px;
    background-color: transparent;
    transition: all .2s ease;
}

.nav>li:not(:last-child, .active)>a:hover::after,
.nav>li.active>a::after {
    width: 120%;
    background-color: var(--primary);
}

.nav>li.active>a:hover::after {
    width: 100%;
    background-color: var(--primary);
} */

.nav .site-li {
    position: absolute;
    right: var(--spacing-inner);
    height:100%;
    width: auto;
    display:flex;
    align-items: center;
    border-left: 1px solid var(--stroke-1);
    border-right: 1px solid var(--stroke-1);
    background-color: var(--gray-scale-0);
}
.site-li a {
    padding: var(--spacing-4) var(--spacing-5);
    font-size: 1.35em;
}
/*.site-li:has(a:focus) {*/
/*    outline: 2px dashed var(--gray-scale-100);*/
/*    outline-offset: 2px;*/
/*}*/
.site-li:hover {
    background-color: var(--gray-scale-10);
}
.nav>li.active>a {
    font-weight: 700;
}

.login-btn {
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 30px;
}

.nav-btn {
    display: none;
}

.nav-mobile-controls {
    display: none;
}

/* nav-control */
.nav-control {
    position:relative;
}

.nav-control-btn {
    display: none;
    position: sticky;
}

.nav-control-btn {
    cursor: pointer;
    color: var(--white);
    background-color: var(--primary);
    padding: 5px 8px;
    border-radius: 50%;
    font-size: 0.75em;
    filter: brightness(1);
    transition: all .2s ease;
}

.nav-control-btn:hover {
    filter: brightness(.7);
}

.btn-next {
    right: 80px;
}

.btn-prev {
    left: 0;
}
.toolbar-nav {
    display:none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 201;
    padding: var(--spacing-3) 0;
    background-color: var(--gray-scale-5);
    min-width: 130px;
    border-radius: var(--spacing-3);
}
.toolbar-nav li a {
    padding: var(--spacing-3) var(--spacing-4);
}
.toolbar-nav li a:hover {
    background:var(--gray-scale-20);
    color:var(--gray-scale-100);
}
#toolbar_menu_ul_mobile {
    width:25%;
}
/* submenu */

.nav li>.submenu {
    display: none;
    background-color: var(--bg-2);
    padding: 10px 0;
    border-radius: 0 10px 10px 10px;
}

.nav li>.submenu a {
    color: var(--text);
}

.nav li > .submenu >li {
    position: relative;
}
.submenu-wrap.active .submenu a:hover {
    background-color: var(--information-10);
}
.submenu a:hover {
    text-decoration: underline;
}

/* search */
#nav-search {
    position: relative;
}
#searchBtn {
    position: absolute;
    right: 0;
    border-radius: 50%;
}
.integratedSearch {
    width: 300px!important;
    padding: var(--spacing-2) var(--spacing-3)!important;
    font: var(--body-md)!important;
}
.nav-search-nav {
    position: relative;
    margin-right: 50px;
}

.nav-search-nav .btn-search-nav {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--strong-txt);
    cursor: pointer;
}

.search-result-wrap {
    margin-bottom: 30px;
}

/*.search-result-wrap li {*/
/*    position: relative;*/
/*    background: var(--white);*/
/*    border: 1px solid var(--box-border);*/
/*    border-radius: 3px;*/
/*    margin-bottom: 10px;*/
/*    padding: 15px 20px;*/
/*    color: var(--text);*/
/*    transition: all .2s ease;*/
/*    cursor: pointer;*/
/*}*/
div:has(.search-word-list) {
    position: relative;
}
.box-contents.search-word-list {
    position: sticky;
    top: 140px;
    padding: var(--spacing-4) var(--spacing-5);
}
.search-word-list button {
    width: 100%;
    text-align: left;
}
.search-word-list .flex-box {
    gap: var(--spacing-3);
    flex-direction: column;
}
.box-noresult {
    height: 240px;
    justify-content: center;
    color: var(--gray-scale-60);
    font: var(--body-lg);
}
.search-result-wrap li:hover {
    background-color: var(--bg-footer);
}

.search-result-wrap li div {
    margin-bottom: 10px;
}

.search-result-wrap>li>div:last-child {
    margin-bottom: 0;
}

.search-result-wrap li .title {
    font-weight: 700;
    font-size: 1.3em;
    color: var(--dark-txt);
    max-width: calc(100% - 80px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-wrap li .keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.search-result-wrap li .date {
    color: var(--light-txt);
}

.search-result-wrap li .surmmary {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-result-wrap li .search-badge {
    position: absolute;
    top: 15px;
    right: 20px;
}
.btn-search-hide {
}
/* --------------------------------------------- footer -------------------------------------------- */
footer {
    background-color: var(--bg-footer);
    padding: var(--spacing-7) 0;
    border-top: 1px solid var(--stroke-2);
}

.footer-logo {
    margin-bottom: 25px;
}

.footer-logo span {
    padding: 2px 15px;
    font-weight: 700;
    color: var(--white);
    background-color: var(--strong-txt);
    font-size: 1em;
}


/* top button */
#topBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--gray-scale-0);
    border: 1px solid var(--stroke-2);
    color: var(--gray-scale-90);
    gap: 20px;
    padding: 15px 12px;
    border-radius: 30px;
    font-size: 9px;
}

#topBtn .top-bar {
    width: 1px;
    height: 10px;
    background-color: var(--strong-txt);
    border-radius: 2px;
}
#topBtn:hover {
    background-color: var(--gray-scale-10);
}
#topBtn:active {
     background-color: var(--gray-scale-20);
 }
#topBtn:focus {
    outline: 3px dashed var(--gray-scale-100);
}
/* --------------------------------------------- main ---------------------------------------------- */
.main-wrap {
    background-color: #ddd;
    /*height: 100vh;*/
    /*background-image: url(../_images/main-visual.jpg);*/
    position: relative;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--box-border);
}
.main-slider .slide {
    position: relative;
    background-color: var(--gray-scale-100);
}
.main-slider .slide img {
    opacity: 0.5;
    position: absolute;
    top: 0;left: 0;
}

.slide-contents {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding-bottom: var(--spacing-10);
}
.main-slider .slide-contents * {
    height: auto;
    color: var(--gray-scale-0);
}
.main-subtitle {
    font: var(--display-sm);
    text-align: center;
    word-break: keep-all;
}
.main-title {
    font: var(--display-lg);
    text-align: center;
    word-break: keep-all;
}
.main-wrap .wrap {
    width: 100%;
    height: 100%;
}

.main-wrap .wrap img {
    width: 110%;
    height: 150%;
    object-fit: cover;
    transform: scale(1.06);
    filter: brightness(1.2);
}

.main-bg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
}

.main-contents {
    position: sticky;
    top: 240px;
    text-align: center;
    z-index: 3;
    padding: 80px 30px;
}

.main-contents h2 {
    font-size: 2.75em;
    font-weight: 400;
    margin-bottom: 65px;
}

.main-contents .main-var {
    width: 1px;
    height: 50px;
    background-color: var(--strong-txt);
    display: inline-block;
}
.main-rsrc-price .box-contents{
    padding: var(--spacing-3) var(--spacing-2);
}
.main-rsrc-price #rsrcPriceChartTab{
    display: block;
    background-color: var(--information-5);
    border-radius:var(--spacing-3);
}
.main-rsrc-price #rsrcPriceChartTab .btn {
    color:var(--gray-scale-90);
    font: var(--label-sm);
    padding: var(--spacing-3);
    justify-content: space-between;
}
.main-rsrc-price #rsrcPriceChartTab .btn:hover {
    background-color: var(--gray-scale-5);
}
.main-rsrc-price #rsrcPriceChartTab .btn.active {
    font: var(--label-sm-b);
    background-color: var(--information-10);
}
.main-rsrc-price #rsrcPriceChartTab .btn:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
    outline-offset: -3px;
    box-shadow: 0 0 10px var(--secondary-20);
}
.main-rsrc-price #rsrcPriceChartTab .num {
    font: var(--label-xs-b);
}
.main-rsrc-price #rsrcPriceChartTab .val {
    color:var(--gray-scale-60);
}
.main-rsrc-price #rsrcPriceChartTab .val-dw {
    color:var(--information-text);
}
.main-rsrc-price #rsrcPriceChartTab .val-up {
    color:var(--danger-text);
}
.main-rsrc-price #rsrcPriceChartTab .val-dw::before {
    content: '\f0dd';
    display:inline-block;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right:var(--spacing-2);
    transform:translateY(-2px);
}
.main-rsrc-price #rsrcPriceChartTab .val-up::before {
    content: '\f0d8';
    display:inline-block;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right:var(--spacing-2);
    transform:translateY(2px);
}
#rsrcPriceInfo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: var(--spacing-3);
}
#rsrcPrcieTabMenu {
    flex-wrap:nowrap;
    overflow-x: auto;
    max-width: 100%;
}
.main-rsrc-price .col-min-3 {
    min-width: 140px;
}
.main-rsrc-price .col-min-9 {
    max-width: calc(100% - 150px);
}
.main-rsrc-price .chart-wrap {
    overflow: hidden; position:relative; max-height: 227px;
}
.main-indx-min .box-contents {
    padding:var(--spacing-2) var(--spacing-2);
}
.main-indx-min .chart-wrap {
    overflow: hidden; position:relative; max-height: 267px;
}
#rsrcPriceChart {
    transform: translate(-15px, -25px);
}
h2:has(.main-cnt-subtitle) {
    font-size: 16px;
}
.main-cnt-subtitle {
    font: var(--title-xl);
}
.title-min {
    font: var(--body-sm);
    color:var(--gray-scale-60);
}
#tabMapKorea, #tabSplyBAlnc, #tabMapMine {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
}
.divSplyBAlnc-label {
    font: var(--label-xs);
}
.chart-cnt-wrap:has(.chart-cnt:not(.hidden-row)) {
    height: 240px;
    overflow:hidden;
}
.chart-cnt > svg {
    transform: translate(-50%, -50px);
    left: 50%;
    position: relative;
}
.divSplyBAlnc-label {
    padding: 0 var(--spacing-9);
}
.divSplyBAlnc-label li{
    padding: 0 var(--spacing-3);
    color: var(--gray-scale-60);
}
.divSplyBAlnc-label li::before {
    content: '';
    width:10px; height:10px;
    border-radius: 2px;
    display: inline-block;
    margin-right:var(--spacing-2);
}
.divSplyBAlnc-label .danger::before {
    background: rgb(0, 126, 255);
}
.divSplyBAlnc-label .warning::before {
    background: rgb(46, 150, 255);
}
.divSplyBAlnc-label .safe::before {
    background: rgb(106, 180, 255);
}
.divSplyBAlnc-label .over::before {
    background: rgb(137, 195, 255);
}
@media screen and (max-width: 1400px) {
    .site-li a {
        padding: var(--spacing-4) 0.9em;
        font-size: 1.35em;
    }
}

@media screen and (max-width: 1200px) {
    .absol-xl-item {
        position: absolute;
        right:0; top:0;
    }
    .box-contents {
        padding: var(--spacing-6) var(--spacing-5)!important;
    }
    .main-rsrc-price .row {
        flex-direction: column;
    }
    .slimScrollDiv, .main-rsrc-price #rsrcPriceChartTab{
        height: auto!important;
    }
    .main-rsrc-price #rsrcPriceChartTab {
        width:100%;
        overflow-x:auto!important;
        flex-wrap:nowrap;
        display: flex;
    }
    .slimScrollBar, .slimScrollRail {
        display:none!important;
    }
    #rsrcPriceChart {
        transform: translate(-8px, -25px);
    }
    #rsrcPriceInfo {
        margin: var(--spacing-3) var(--spacing-3) 0;
    }
    #divMnrlIndxMinChart {
        height:385px;
    }
    .main-rsrc-price .col {
        width: 100%; max-width: 100%;
    }

}
@media screen and (max-width: 1024px) {
    .main-rsrc-price .col-min-4 {
        width: 40%;
    }
    .main-rsrc-price .col-min-8 {
        width: 80%;
    }
    .absol-lg-item {
        position: absolute;
        right:0; top:0;
    }
    .main-rsrc-price .row {
        flex-direction: row;
    }
    #rsrcPriceInfo {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: var(--spacing-3);
    }
    #rsrcPrcieTabMenu {
        flex-wrap:nowrap;
        overflow-x: auto;
        max-width: 100%;
    }
    .main-rsrc-price .col-min-3 {
        width: calc((100% / 4) - 8px);
        min-width: 140px;
    }
    .main-rsrc-price .col-min-9 {
        max-width: calc((100%/12*9) - 8px);
    }
    .main-rsrc-price #rsrcPriceChartTab {
        display: block;
        height:250px!important;
    }
    .slimScrollBar, .slimScrollRail {
             display: block !important;
    }
    #divMnrlIndxMinChart {
        height:auto;
    }
}
@media screen and (max-width: 768px) {
    .absol-md-item {
        position: absolute;
        right:0; top:0;
    }
    .main-rsrc-price .row {
        flex-direction: column;
    }
    .main-rsrc-price .col {
        width: 100%;
        max-width: 100%;
    }
    .slimScrollDiv, .main-rsrc-price #rsrcPriceChartTab{
        height: auto!important;
    }
    .main-rsrc-price #rsrcPriceChartTab {
        width:100%;
        overflow-x:auto!important;
        flex-wrap:nowrap;
        display: flex;
    }
    .slimScrollBar, .slimScrollRail {
        display:none!important;
    }
}
/* visual */
.visual-box {
    padding: 44px 0;
    /*background-image: url(../_images/main-visual.jpg);*/
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center;
    overflow: hidden;
    border-bottom: 1px solid var(--stroke-1);
}

.visual-box::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: var(--alpha-45);
    backdrop-filter: blur(1px);
}

.visual-box h2 {
    font: var(--heading-sm);
    color: var(--gray-scale-0);
    position: relative;
    z-index: 2;
}

/* box */
.double-box,
.triple-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.double-box .contents-box {
    width: calc(50% - var(--spacing-4));
}

.triple-box .contents-box {
    width: calc(33% - var(--spacing-4));
}

.box-header {
    padding: 15px 0;
    border-bottom: 3px solid var(--primary);
}

.box-header h3 {
    color: var(--strong-txt);
    font-weight: 700;
    margin-left: 20px;
    font-size: 1.25em;
}

.more-btn {
    padding: 4px 10px;
    font-weight: 700;
    font-size: 0.75em;
    border-radius: 30px;
}

.more-btn span {
    margin-right: 8px;
}

/* table */
.table {
    table-layout: fixed;
    width: 100%;
    border-spacing: 0;
}

.table td,
.table th {
    text-align: center;
}

.table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.table .td-left {
    text-align: left;
}

.table .td-right {
    text-align: right;
}

td a:hover {
    text-decoration: underline;
}

.table .td-title .title {
    display: inline-block;
    max-width: calc(100% - 40px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.boadr-min-wrap td {
    color: var(--text);
    padding: 15px;
    border-bottom: 1px solid var(--box-border);
}

.boadr-min-wrap tr:last-child td {
    border-color: var(--strong-txt);
}

.boadr-min-wrap td a {
    color: var(--text);
}
.table-active tr {
    cursor:pointer;
}
.table-active tr:hover td {
    background-color: var(--gray-scale-10);
}
.table-active tr:active td {
    background-color: var(--gray-scale-20);
}
.table-active tr:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
.table-active tr.active td {
    background-color: var(--gray-scale-5);
}
.table-controls th, .table-controls td {
    padding: var(--spacing-4) var(--spacing-3);
}
.table-controls tbody tr:first-child th {
    border-top: 0;
}
/* search */
.search-wrap {
    background-color: var(--bg-2);
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: var(--box-border);
    padding: 50px ;
    margin: 0 var(--spacing-inner) var(--spacing-8);
}

/* .search-wrap input[type="text"],
.search-wrap select {
    border: 1px solid var(--strong-txt);
    background-color: var(--white);
    border-radius: 30px;
    padding: 8px 15px;
}

.search-wrap input[type="text"]::placeholder {
    color: var(--light-txt);
} */

.search-wrap select {
    min-width: 120px;
    padding-right: 30px;
}

/*.search-wrap input[type="text"] {*/
/*    width: 100%;*/
/*    max-width: 450px;*/
/*}*/

.search-box fieldset {
    display: flex;
    gap: 8px;
    justify-content: center;
    width: 100%;
}

.search-wrap .btn {
    font-weight: 700;
    padding: 0 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* search-module */
.search-modul-wrap * {
    border-radius: 0;
}

.search-modul-wrap>div *:first-child {
    border-radius: 30px 0 0 30px;
    border-right: 0;
}

.search-modul-wrap *:last-child {
    border-radius: 0 30px 30px 0;
}

.search-modul-wrap .input-box {
    padding: 6px 10px 6px;
}

.search-modul-wrap .btn {
    padding: 6px 20px;
}

.search-modul-btn {
    padding: 7px;
    border-radius: 50%;
    display: none;
}

/* list */
.contents-wrap {
    padding: 80px 0 100px;
}

.list-head {
    margin-bottom: 15px;
    padding-left: 10px;
    position: relative;
}

.list-head .amount,
.box-header .amount,
.gallery-wrap .amount {
    color: var(--text);
    font-size: 1.15em;
}

.list-head .amount b,
.box-header .amount b,
.gallery-wrap .amount b {
    color: var(--primary);
    margin-left: 5px;
}

/*.list-head select {*/
/*    padding: 6px 40px 6px 15px;*/
/*    border-radius: 30px;*/
/*    border: 1px solid var(--box-border);*/
/*    color: var(--text);*/
/*}*/

.list-body {
    margin-bottom: 50px;
}

.board-list th {
    background-color: var(--light-gray);
    border-top: 3px solid var(--primary);
    padding: 20px 5px;
}

.board-list td {
    background-color: var(--white);
    border-top: 1px solid var(--box-border);
    padding: 20px 5px;
    color: var(--text);
}

.board-list td a {
    color: var(--text);
}

.board-list {
    border-bottom: 1px solid var(--strong-txt);
}

.mobile-title {
    display: none;
    color: var(--gray-scale-60);
}
.mobile-1depth {
    display: none;
}

.td-title .reply {
    padding: 3px 5px;
    background-color: var(--bg-footer);
    color: var(--primary);
    border-radius: 20px;
    display: inline-block;
    font-weight: 700;
    font-size: 0.85em;
    transform: translateY(-3px);
    margin-left: 3px;
}

.td-title .new {
    padding: 3px 5px;
    font-size: 0.6em;
    background-color: var(--gray-scale-0);
    color: var(--white);
    display: inline-block;
    font-weight: 700;
    border-radius: 20px;
    transform: translateY(-3px);
    margin-left: 3px;
}

.headless-table tbody tr:first-child td {
    border-top: 0;
}

/* pagination */
.pagination-wrap {
    text-align: center;
}

.pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.pagination a {
    width: 40px;
    height: 40px;
    font: var(--label-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--spacing-2);
    background-color: var(--gray-scale-5);
    border: 1px solid var(--stroke-2);
    color: var(--gray-scale-70);
}
.pagination .disabled a {

}
.pagination .active a {
    background-color: var(--secondary-50);
    color: var(--gray-scale-0);
    border-color: var(--secondary-50);
    cursor: default;
}

.pagination li:not(.active, .disabled) a:hover {
    background-color: var(--gray-scale-20);
}
.pagination li:not(.active, .disabled) a:active {
    background-color: var(--gray-scale-30);
}
.pagination li:not(.active, .disabled) a:focus-visible {
    box-shadow: 0 0 10px var(--gray-scale-30);
}
.pagination .disabled a {
    background-color: var(--gray-scale-10);
    border-color: var(--gray-scale-10);
    color: var(--light-txt);
    cursor: default;
}

/* gallery */
.gallery-min-wrap a {
    display: block;
    width: 100%;
    margin-top: 15px;
    color: var(--text);
}

.gallery-min-wrap a:hover {
    text-decoration: underline;
}

.gallery-thumb {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
    background-color: var(--box-border);
    overflow: hidden;
}

.gallery-thumb img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all .2s ease;
}

.gallery-thumb:hover img {
    transform: scale(1.1);
}

.gallery-wrap {
    padding: 25px 0 80px;
}

.gallery-box {
    display: block;
    width: calc(100% / 4 - 30px);
    height: 300px;
    overflow: hidden;
    position: relative;
    padding: 10px;
}

.gallery-box img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
    width: 120%;
    height: 120%;
    transition: all .2s ease;
}

.gallery-contents .box-body {
    display: flex;
    gap: calc(40px / 3);
    flex-wrap: wrap;
    padding: 20px 12px;
    border-bottom: 1px solid var(--box-border);
    margin-bottom: 30px;
}

.gallery-info {
    position: absolute;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all .2s ease;
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--white);
    opacity: 0;
    z-index: 2;
    backdrop-filter: blur(3px);
    border-radius: 10px;
}

.gallery-info .title {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 0 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 60px);
    text-align: center;
}

.gallery-info .bar {
    width: 0;
    height: 1px;
    background-color: var(--white);
    transition: all .2s linear;
}

.gallery-box:hover .gallery-info .bar {
    width: 50%;
}

.gallery-info .date {
    margin-top: 10px;
    font-size: 0.8em;
}

.gallery-box:hover .gallery-info {
    opacity: 1;
    transform: scale(1);
}

.gallery-box:hover img {
    transform: scale(1.1);
}

#writePost {
    padding: 6px 30px;
    border-radius: 30px;
}

/* th-side */
.th-side td,
.th-side th {
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--box-border);
    padding: 20px;
}

.th-side th {
    background-color: var(--bg-footer);
}

.th-side tr:last-child td,
.th-side tr:last-child th {
    border-bottom: 1px solid var(--strong-txt);
}

.th-side .label {
    font-weight: 700;
    margin-bottom: 10px;
}

.label.most::after {
    content: '*';
    display: inline-block;
    color: var(--red);
    margin-left: 3px;
}

.user-sns.small {
    min-width: 18px;
    height: 18px;
    font-size: 14px;
}

.user-sns.small::after {
    font-size: 12px !important;
}

.th-side .form-group {
    max-width: 280px;
    width: 100%;
}
.th-side .w-100 {
    width: 100%;
}
.profile-box {
    width: 220px;
}
.profile-img-box {
    width: 140px;
    height: 140px;
    border: 1px solid var(--box-border);
    border-radius: 50%;
    overflow: hidden;
    background-image: url('../_images/public-img.png');
    background-size: cover;
    background-position: center;
}
.profile-img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

    /* post-view */
.post-contents {
    padding-top: 80px;
    padding-bottom: 120px;
}

/*.visual-box.post-head {*/
/*    padding: 360px 0 40px;*/
/*}*/

.post-head h3 {
    font: var(--heading-md);
    font-weight: 700;
    width: 100%;
    word-break: keep-all;
}

.post-contents .post-head {
    border-top: 1px solid  var(--stroke-2);
    border-bottom: 1px solid var(--stroke-2);
    padding: var(--spacing-7) var(--spacing-10);
    background-color: var(--bg-2);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-5);

}

.post-contents .post-head h2 {
    margin-bottom: 10px;
}

.post-contents .post-head .post-infor-wrap {
    color: var(--gray-scale-100);
    white-space: nowrap;
    font: var(--detail-md);
}
.post-contents .post-head .post-infor-wrap span {
    font: var(--detail-md-b);
}

.post-wrap.post-answer {
    background-color: var(--bg-footer);
    padding: 10px 15px;
    border-radius: 0 0 10px 10px;
}

.post-wrap.post-answer .post-head {
    margin-top: 10px;
}

.post-wrap.post-answer .cntsContainer {
    padding: 20px 20px 50px;
}

.no-post {
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cntsContainer {
    padding: 50px 20px 60px;
    border-bottom: 1px solid var(--box-border);
}

.file-list-wrap {
    padding: 15px 10px 20px;
    border-bottom: 1px solid var(--box-border);
}

.file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.file-box {
    /*display: block;*/
    /*width: 190px;*/
    flex-direction: row;
    display: flex;
    align-items: center;
}

.file-preview {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5em;
    border-radius: 5px 5px 0 0;
    background-color: #f5f5f5;
    border: 1px solid var(--stroke-2);
    color: var(--box-border);
    overflow: hidden;
}

.file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-infor {
    background-color: var(--white);
    padding: 10px 10px 15px;
    color: var(--text);
    border: 1px solid var(--box-border);
    border-top: 0;
    font-size: 0.75em;
    position: relative;
}

.file-infor::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 10px solid var(--gray-scale-20);
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid var(--gray-scale-20);
}

.file-list-title {
    color: var(--text);
    margin-bottom: 18px;
}

.file-list-title .file-title {
    font-weight: 700;
    color: var(--strong-txt);
}

.post-btn-wrap {
    padding: 20px 0;
    display: flex;
    gap: var(--spacing-3);
    justify-content: end;
}

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

.title-point {
    padding: 15px 20px;
    font-weight: 700;
    font-size: 1.5em;
    border-radius: 0 5px 5px 0;
    background-color: var(--white);
    border: 1px solid var(--box-border);
    border-left: 5px solid var(--primary);
}

.last-rewrite {
    color: var(--light-txt);
    font-size: 0.8em;
    margin-top: 10px;
}

/* post-reply */
.post-reply {
    max-width: 1390px;
    margin: 0 auto;
    background-color: var(--light-gray);
    border-width: 1px 0 1px 0;
    border-color: var(--box-border);
    border-style: solid;
    padding: 20px 25px 25px;
}

.reply-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--box-border);
}

.reply-title {
    font-size: 1.3em;
    color: var(--strong-txt);
    font-weight: 700;
}

.reply-title .count {
    font-weight: 400;
    color: var(--light-txt);
}

.reply-last {
    font-size: 0.85em;
    color: var(--gray-scale-70);
}

.reply-body {
    margin-bottom: 30px;
}

.reply-infor {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 8px;
}

.reply-box {
    padding: 30px 10px;
    border-bottom: 1px solid var(--box-border);
    position: relative;
}

.reply-box .writter {
    font-weight: 700;
    font-size: 1.15em;
}

.reply-box .date {
    color: var(--gray-scale-70);
    font-size: 0.85em;
}

.reply-contents {
    color: var(--text);
}

.reply-controls {
    position: absolute;
    display: flex;
    gap: 5px;
    right: 0;
    top: 30px;
}

.re-reply {
    padding-left: 50px;
}

.re-reply::before {
    content: '';
    display: block;
    width: 22px;
    height: 24px;
    background: url('../_images/re_reply.svg') no-repeat center;
    position: absolute;
    top: 30px;
    left: 15px;
}

.reply-foot .title {
    color: var(--text);
    margin-bottom: 15px;
    font-weight: 700;
}

#inputReply {
    width: calc(100% - 20px);
    background-color: var(--white);
    border: 1px solid var(--box-border);
    border-radius: 5px;
    resize: none;
    height: 80px;
    padding: 10px;
    margin-bottom: 10px;
}

.reply-send {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.reply-send .btn {
    border-radius: 30px;
}

/* write */
.write-contents {
    padding: 30px 0 120px;
}

.write-contents .inner {
    max-width: 1024px;
}

.form-wrap .label {
    margin-bottom: 10px;
    font-weight: 700;
}

.write-post-wrap .form-wrap {
    /*margin-bottom: 30px;*/
    width: 100%;
}

.write-post-wrap .btn-wrap .btn {
    min-width: 150px;
    /*border-radius: 30px;*/
}
.write-post-wrap .table td, .write-post-wrap .table th {
    padding: var(--spacing-5);
}
.write-post-wrap .table th {
    font:var(--body-md-b);
    vertical-align: top;
    text-align: left;
    word-break: keep-all;
}

/* file */
.file-upload {
    width: 100%;
    position: relative;
}

.file-upload-list {
    flex-direction: column;
    padding: 5px 10px;
    height: 200px;
    overflow-y: auto;
    border: 1px solid var(--box-border);
    border-radius: 4px;
}

.file-upload-list li {
    width: 100%;
    color: var(--text);
    cursor: default;
}
.file-weight {
    color: var(--gray-scale-60);
}

.ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable {
    height: 420px;
}

#fileUpload {
    display: none;
}

.file-upload-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 4px 0 0 0;
    border: 1px solid var(--box-border) !important;
    cursor: pointer;
    z-index: 2;
}
.hover.file-upload-btn {
    background-color: var(--gray-scale-10);
}

.upload-notice {
    padding-top: 30px;
    color: var(--text);
    /*font-size: .85em;*/
}

.btn-delete {
    padding: 5px;
    color: var(--light-txt);
}

.no-file {
    height: 100%;
}

.no-file div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-file div b {
    color: var(--primary);
    margin: 0 2px;
}

.form-wrap.btn-wrap {
    border-top: 1px solid var(--box-border);
    padding-top: 15px;
}

#writeSubmit,
#writeDelete {
    padding: 8px 30px;
    border-radius: 30px;
}


/* ------------------------------------------ signin page ----------------------------------------- */

.signin-theme {
    background-color: var(--bg-footer);
}

/* .sign-contents .inner,
.sign-header .inner {
    max-width: 700px !important;
} */

.sign-header {
    padding-top: 60px;
}

.sign-header h1 {
    font-size: 1.25em;
    margin-bottom: 50px;
}

.sign-header h1 a {
    font-weight: 700;
    color: var(--white);
    background-color: var(--primary);
    padding: 0 10px;
}

.sign-contents {
    padding-bottom: 120px;
}

.signin-head {
    text-align: center;
    padding-top: 4em;
}

.signin-progress {
    margin: 40px 0;
    gap: 25px;
}

.signin-progress li {
    margin-bottom: -2px;
    padding: 10px;
    color: var(--box-border);
    display: flex;
}

.signin-progress .bar {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--gray-scale-20);
}
.signin-progress > .active {
    border-radius:10px;
    outline:3px dashed var(--secondary-50);
    outline-offset:2px;
}
.signin-progress .active + .bar::after {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 50%;
    height: 100%;
    background-color: var(--secondary-50);
}
.signin-progress .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--spacing-10);
    height: var(--spacing-10);
    border-radius: 50%;
    background-color: var(--gray-scale-30);
}
.signin-progress .icon-white {
    background-color: var(--secondary-50);
}
.signin-progress .icon-white {
    display: none;
}
.signin-progress .active .icon-white,
.signin-progress .actived .icon-white
{
    display: flex;
}
.signin-progress .active .icon-gray,
.signin-progress .actived .icon-gray  {
    display: none;
}
.signin-progress .title span {
    white-space: nowrap;
    font: var(--title-lg);
}
.signin-progress .title span.small {
    font: var(--body-md);
    color: var(--gray-scale-60);
}
.signin-progress .active .title span, .signin-progress .active .title span.small,
.signin-progress .actived .title span, .signin-progress .actived .title span.small {
    color: var(--primary);
}
.signin-head h2 {
    font: var(--heading-md);
}
.signin-head p {
    font: var(--body-md);
    color: var(--gray-scale-60);
}

.signin-progress .actived + .bar::after {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--secondary-50);
}
.progress-item {
    position: absolute;
}

.signin-body {
    background-color: var(--white);
    /*padding: 30px 30px 10px;*/
    max-width: 1280px;
    margin: 0 auto var(--spacing-10);
}
/*.signin-body.box-contents {*/
/*    padding: 40px 30px;*/
/*}*/

.terms-contents {
    padding: 10px;
    height: 260px;
    border-radius: 5px;
    border: 1px solid var(--box-border);
    overflow-y: auto;
    margin-bottom: 10px;
    font-size: 0.85em;
    color: var(--text);
    line-height: 1.3;
    background-color: var(--bg-1);
}
.terms-contents * {
    font: var(--detail-md)!important;
}

.signin-body .label,
.terms-wrap .label {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.terms-wrap .terms-box {
    margin-bottom: 30px;
}

.contents-box .terms-wrap li:last-child .terms-box {
    margin-bottom: 0;
}

.signin-body .check-wrap {
    text-align: right;
}

.check-wrap label,
.check-wrap input {
    cursor: pointer;
}

.signin-foot {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.signin-foot .btn {
    width: 180px;
    max-width: 100%;
}

.signin-form-wrap {
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: 20px;
}

.signin-box {
    margin-bottom: var(--spacing-10);
}
.input-label {
    font: var(--title-md);
    color: var(--gray-scale-90);
    margin-bottom: var(--spacing-3);
}
.most .input-label:after {
    content: '＊';
    display: inline-block;
    color: var(--point-50);
}

.contents-ready {
    position: relative;
    background-color: var(--light-gray);
    min-height: 160px;
    padding: 0 8%;
    background-image: url('../_images/contents_ready.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: calc(100% + 10px) 20px;
}

.contents-ready p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    font-size: 1.25em;
    text-shadow: 0 0 3px var(--light-gray), 0 0 3px var(--light-gray);
}

.form-title {
    font-size: 1em;
    padding: 8px 15px;
    border-left: 3px solid var(--primary);
    margin-bottom: 20px;
    font-weight: 700;
    border-radius: 0 5px 5px 0;
    background-color: var(--bg-footer);
}

.user-sns {
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--box-border);
}

.user-naver {
    background-color: #03c75a;
}

.user-kakao {
    background-color: #fae100;
}

.user-naver::after {
    content: 'N';
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
}

.user-kakao::after {
    content: '\f075';
    color: #000;
    font-size: 18px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 700;
}

.signin-success-wrap {
    text-align: center;
    margin-bottom: 40px;
}

.signin-success-wrap img {
    max-width: 420px;
    width: 100%;
    margin-bottom: 25px;
}

.signin-success-wrap p {
    font-size: 1.25em;
    color: var(--text);
    font-weight: 700;
    margin-bottom: 30px;
}

.signin-success-wrap .btn-wrap .btn {
    border-radius: 30px;
}

/* -------------------------------------------- mypage -------------------------------------------- */
.mypage-box-wrap {
    align-items: stretch;
}

.mypage-wrap {
    padding: 50px 0 100px;
}
.mypage-wrap .menu-min-wrap  {
    width: calc(25% - 10px);
}
.mypage-wrap .menu-min-wrap.box-contents {
    padding: var(--spacing-6) var(--spacing-5) var(--spacing-8);
}
.menu-min-wrap {
    background-color: var(--white);
}

.menu-min-wrap .menu-label {
    font: var(--title-lg);
    padding: 0 var(--spacing-4) var(--spacing-4);
    position: relative;
    border-bottom: 3px solid var(--stroke-2);
}
.menu-min-wrap .menu-label::after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--secondary-50);
    bottom: -3px;
    position: absolute;
    left: 0;
}
.min-menu {
    /*overflow: hidden;*/
    padding-bottom: 3px;
}
.site-map-wrap .min-menu li {
    width: 250px;
}

.min-menu li a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid var(--stroke-2);
    color: var(--gray-scale-100);
    font: var(--body-sm);
}
.min-menu {
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    gap: 0 10px;
    max-height: 360px;
}
 .min-menu li.has-sub > a{
    display: flex;
    cursor: default;
}

.min-menu li.active a {
    background-color: var(--gray-scale-5);
    font: var(--body-sm-b);
}


.mypage-contents {
    width: calc(75% - 40px);
}

.mypage-contents .contents-box {
    padding: 20px 30px 30px;
    border-radius: 10px;
    border: 1px solid var(--box-border);
    margin-bottom: 20px;
}

.mypage-contents .contents-box:last-child {
    margin-bottom: 0;
}

.mypage-contents .box-body {
    margin-bottom: 20px;
}

.notice b {
    color: var(--red);
}

.withdrawal-wrap h3 {
    margin-bottom: 15px;
}

.withdrawal-head,
.withdrawal-body {
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--strong-txt);
}

.withdrawal-box:not(:last-child) {
    margin-bottom: 30px;
}

.withdrawal-box .title {
    font-weight: 700;
    margin-bottom: 10px;
}

.withdrawal-body .user-box {
    padding: 15px;
    border-radius: 10px;
    border: 1px solid vaR(--box-border);
    color: var(--text);
}

.withdrawal-foot .check-wrap {
    margin-bottom: 5px;
}

.withdrawal-foot .btn-wrap {
    margin-top: 30px;
}

.withdrawal-foot .btn-wrap .btn {
    padding: 10px 30px;
    border-radius: 30px;
}

/* ----------------------------------------- index-only ------------------------------------------- */

.boards-wrap {
    padding: 40px 0 60px;
}

.main-news-contents {
    overflow-x:auto;
    padding: 0 var(--spacing-3);
    height: 100%;
}
.main-news-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.main-news-nav a {
    font: var(--title-lg);
    color: var(--gray-scale-60);
    padding: var(--spacing-3);
    position: relative;
    border-radius: var(--spacing-3);
}
.main-news-nav a.active {
    color: var(--secondary-50);
}
.main-news-nav a.active::after {
    content: '';
    display: block;
    position: absolute;
    right: 0; top: 10px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background-color: var(--secondary-50);
}
.main-news-nav a:not(.active):hover {
    background-color: var(--gray-scale-20);
}
.main-news-nav a:not(.active):active {
    background-color: var(--gray-scale-30);
}
.main-news-nav a:focus-visible {
    box-shadow: 0 0 10px var(--gray-scale-30);
}
.news-daily {
    gap:10px;
}
.news-daily .box-contents {
    border: 0;
    padding: var(--spacing-6) var(--spacing-5) var(--spacing-5);
    border-radius: var(--spacing-4);
    gap:6px;
    cursor: pointer;
    width:calc(20% - 10px);
}

.news-daily .box-contents .absolute-item {
    top: var(--spacing-9);
    right: var(--spacing-8);
}
.news-weekly * {
    white-space: nowrap;
}
.news-weekly .box-contents {
    border: 0;
    border-radius: var(--spacing-4);
    padding: 14px var(--spacing-6) ;
}
.news-weekly .box-contents .file-box {
    display: inline-block;
    width:fit-content;
}

.news-monthly .box-contents {
    border: 0;
    border-radius: var(--spacing-4);
    padding: var(--spacing-5) var(--spacing-8) var(--spacing-5) var(--spacing-6);
}
.news-monthly,.news-monthly-rare {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    gap:var(--spacing-4);
}
.news-monthly .box-contents,.news-monthly-rare .box-contents {
    padding: 0 !important;
    overflow: hidden;
    height: 340px;
    width: 340px;
    max-width: 100%;
    border: 0;
    border-radius: var(--spacing-4);
    cursor: pointer;
    border: 1px solid var(--stroke-1);
}
.news-monthly .box-contents img,.news-monthly-rare .box-contents img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    transition: scale .2s ease;
}
.news-monthly .box-contents:hover img, .news-monthly-rare .box-contents:hover img {
    scale:1.1;
}
.news-monthly .box-contents p, .news-monthly-rare .box-contents p{

    position: absolute;
    z-index: 2;
    font: var(--label-sm-b);
}
.news-monthly-rare .box-contents p {
     left: var(--spacing-8);
    bottom: var(--spacing-3);
     color: var(--secondary-60);
 }
.news-monthly .box-contents p {
    color:var(--gray-scale-100);
    right: 50%;
    transform: translateX(10%);
    bottom: 2.3em;
}
.news-daily, .news-monthly, .news-monthly-rare {
    min-width: 980px;
    height: 100%;
    align-items: flex-end;
}
.news-daily .box-contents:focus-visible,
.news-monthly .box-contents:focus-visible,
.news-monthly-rare .box-contents:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
.news-monthly-rare .box-contents .thumb-box {
    width: 100%;
    height: 200px;
}

@media (max-width:1400px) {
    .chart-cnt > svg {
        transform: translate(-50%, -50px);
    }
}
@media (max-width:1200px) {
    .news-weekly .box-contents {
        padding: var(--spacing-5)!important;
        padding-right: var(--spacing-8)!important;
    }
    .divSplyBAlnc-label {
        padding: 0;
    }
    .news-daily .box-contents {
        padding: var(--spacing-5) var(--spacing-5) var(--spacing-4)!important;
    }
    .chart-cnt-wrap:has(.chart-cnt:not(.hidden-row)) {
             height: 210px;
         }
    .chart-cnt > svg {
        transform: translate(-50%, -80px);
    }
}
@media (max-width:1024px) {
    .boards-wrap h2 {
        margin:0!important;
    }
    .news-monthly, .news-monthly-rare {
         min-width: unset;
    }
    .news-daily {
        min-width: 840px;
    }
    .chart-cnt-wrap:has(.chart-cnt:not(.hidden-row)) {
        height: 300px;
    }
    .chart-cnt > svg {
        transform: translate(-50%, 0);
    }
    .news-monthly , .news-monthly-rare {
        flex-wrap: wrap;
        justify-content: center;
    }

    .news-weekly {
        gap: 15px!important;
    }
    .news-monthly .box-contents, .news-monthly-rare .box-contents {
         width:170px!important;
         height: 170px!important;
     }
}
@media (max-width:768px) {
    .news-monthly-rare .box-contents .thumb-box {
        height: 200px;
    }
    .chart-cnt-wrap:has(.chart-cnt:not(.hidden-row)) {
        height: 250px;
    }
    .chart-cnt > svg {
        transform: translate(-50%, -40px);
    }
}
@media (max-width:568px) {
    .chart-cnt-wrap:has(.chart-cnt:not(.hidden-row)) {
        height: 220px;
    }
    .chart-cnt > svg {
        transform: translate(-50%, -100px);
    }
}
@media (max-width:390px) {
    .news-monthly-rare .box-contents .thumb-box {
        height: 180px;
    }
}
/*.main-contents-1 {*/
/*    margin-bottom: 70px;*/
/*}*/

/*.main-contents-1 .box-contents {*/
/*    height: 237px;*/
/*    background-color: var(--box-border);*/
/*    margin-top: 14px;*/
/*}*/

/*.event-thumb {*/
/*    display: block;*/
/*    height: 100%;*/
/*    overflow: hidden;*/
/*}*/

/*.event-thumb img {*/
/*    object-fit: cover;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    transition: all .2s ease;*/
/*}*/

/*.event-thumb:hover img {*/
/*    transform: scale(1.1);*/
/*}*/

/* error */
.error-theme {
    padding-top:0;
    background-color: var(--bg-1);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.error-box {
    padding: 30px;
}

.error-box img {
    width: 100%;
    max-width: fit-content;
    margin-bottom: 30px;
    filter: saturate(0) brightness(1.05);
}

.error-box p {
    font-size: 1.8em;
    color: var(--strong-txt);
    font-weight: 700;
    margin-bottom: 40px;
}

/* contact */
.contact-wrap {
    position: relative;
    background-image: url('../_images/contact_img.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    margin: 80px 0 100px;
}

.contact-txt {
    background-color: var(--white);
    position: absolute;
    padding: 60px 50px;
    top: 100px;
    border-radius: 30px 0 30px 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}

/* faq */
/* .accordion-board-wrap {
    border-top: 2px solid var(--strong-txt);
    border-bottom: 1px solid var(--strong-txt);
}

.accordion-head {
    transition: all .2s ease;
    background-color: var(--white);
    padding: 20px 25px;
    border-bottom: 1px solid var(--box-border);
    cursor: pointer;
}

.accordion-head:hover,
.accordion-head.active {
    background-color: var(--bg-footer);
}

.accordion-head i {
    transition: all .3s ease;
    color: var(--text);
}

.accordion-head .title {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.accordion-head.active .title {
    font-weight: 700;
}

.accordion-head.active i {
    transform: rotate(-180deg);
    color: var(--primary-light);
}

.accordion-body {
    border-bottom: 1px solid var(--box-border);
    background-color: #fff;
    padding: 20px 30px;
    line-height: 150%;
    color: var(--text);
    font-size: 0.85em;
} */

/* modal overwrite */


.modal-sm {
    max-width: 560px;
}

.note-modal .modal-dialog {
    max-width: 560px;
}
/* file uploader overwrite */
label.note-form-label {
    display: block;
    font-weight: 700;
    font-family: 'Montserrat';
    margin-bottom: 5px;
}

.form-group.note-form-group.note-group-select-from-files {
    margin-bottom: 20px;
}

.note-image-url {
    width: calc(100% - 12px);
    padding: 6px;
    outline: 0;
    border: 1px solid var(--box-border);
}

.note-image-input {
    color: var(--text);
    font-family: 'PretendardGOV';
}

.note-image-input::file-selector-button {
    background-color: var(--white);
    color: var(--strong-txt);
    border: 1px solid var(--strong-txt);
    border-radius: 30px;
    transition: all .2s ease;
    font-weight: 700;
    padding: 3px 10px;
}

.note-image-input::file-selector-button:hover {
    background-color: var(--strong-txt);
    color: var(--white);
}

.note-editor.note-frame .note-placeholder {
    color: var(--gray-scale-60);
}

.note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset, .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select {color : var(--white);}

/* ccl */
.ccl-wrap {
    padding: 20px 0;
    background-color: var(--strong-txt);
    color: var(--white);
}

.ccl-wrap p {
    font-size: 0.75em;
    text-align: right;
}

.ccl-wrap img {
    height: 45px;
}

/* radio */
.radio-label {
    display: flex;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.375em;
    /* Accessible outline */
    /* Remove comment to use */
    /*
      &:focus-within {
          outline: .125em solid $primary-color;
      }
    */
}
.radio-label input {
    position: absolute;
    left: -9999px;
}
.radio-label input:checked + span:before {
    box-shadow: inset 0 0 0 0.4375em var(--primary);
}
.radio-label:hover span:before {
    box-shadow: inset 0 0 0 0.2em var(--primary);
}

.radio-label span {
    display: flex;
    align-items: center;
    border-radius: 99em;
    transition: 0.25s ease;
}

.radio-label span:before {
    display: flex;
    flex-shrink: 0;
    content: "";
    background-color: var(--white);
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    margin-right: 0.375em;
    transition: 0.25s ease;
    box-shadow: inset 0 0 0 0.125em var(--primary);
}

.textarea {
    resize: none;
}

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



/* update : 2024-07-08 */

/* main */
.main-slider {
    height: 520px;
    overflow: hidden;
}

.main-slider * {
    height:100% ;
}
.slick-slide img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}
/*header*/
/* nav */
.nav, .nav-wrap {
    border-bottom: 1px solid var(--stroke-1);
    background-color: var(--gray-scale-0);
}
.nav-wrap {
    position: relative;
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}

.main-top-nav {
    padding:0 !important;
}

.nav > li:not(:last-child) > a {
    display: block;
    font: var(--title-lg);
    width: 100%;
    text-align: center;
    padding: var(--spacing-4) 0;
    color:var(--text-1);
    align-items: center;
}
.nav > li.active {
    background:var(--secondary-50);
}
.nav > li.active > a {
    color: var(--gray-scale-0);
}
.nav-control a, .nav-control button {
    font: var(--label-sm);
    color: var(--gray-scale-60);
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 5px;
}
.nav-control button:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
   }

.nav-control a i, .nav-control button i {
    color: var(--gray-scale-50);
}

/* submenu */
.nav-contents {
    position: relative;
}
.submenu-area {
    display: none;
    position: absolute;
    overflow-y: auto;
    z-index: 2;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /*padding-top: var(--spacing-3);*/
    padding-bottom: 0;
    padding-right: calc(var(--spacing-inner) * 2 + 16px);
    background-color: var(--gray-scale-0);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 0 15px #00000026;
}
.submenu-wrap.active {
    background-color:var(--information-5);
}
.submenu-area .submenu, .submenu-wrap {
    width: 100%;
}
.submenu-wrap {
    border-left: 1px solid var(--gray-scale-20);
}
.submenu-area .submenu > li > a {
    word-break: break-word;
    display: flex;
    gap: var(--spacing-4);
    align-items: center;
    position: relative;
    font:var(--label-sm);
    color: var(--gray-scale-90);
    padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-4);
    border-radius: 0 8px 8px 0;
}
.submenu-area .submenu > li > a i {
    font-size: 12px;
    color: var(--gray-scale-50);
}
.submenu-area .submenu {
    padding: var(--spacing-3) 0 var(--spacing-4);
}
.submenu a:hover {
    background-color: var(--gray-scale-10);
    text-decoration: none;
}
.submenu-2 {
    padding: var(--spacing-3);
    background-color: var(--bg-2);
    border-radius: 0 0 8px 0;
    position: static !important;
    inset: unset !important;
    margin: auto !important;
    transform: none !important;
}
.submenu-2 a {
    display: block;
    color: var(--gray-scale-100);
    padding: var(--spacing-2) var(--spacing-2);
    border-radius: 8px;
    font: var(--label-sm);
}
.submenu-2 a:hover {
    background-color: var(--gray-scale-20);
}

.nav-backdrop {
    position: fixed;
    top: 0; left: 0;
    display: none;
    background-color: var(--alpha-65);
    content: '';
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 1;
}
i.open {
    transform: rotate(180deg);
}
.nav-btn {
    display: none;
}
.search-mobile-item {
    display: none;
}
#toolbarMenuMobile .fa-chevron-down {
    display: none;
}
/* search */
.nav .search-li {
    width: auto;
}
.nav .search-li-item {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:var(--gray-scale-100);
}
.search-wrap-nav {
    display: none;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    width: 100%;
    max-width: 1200px;
    z-index: 2;
    margin: 0 auto;
    background-color: var(--gray-scale-0);
    border-radius: 0 0 16px 16px;
    padding: 40px 16px 60px;
}
.search-wrap-nav > div {
    max-width: 640px;
    margin: 0 auto;
}
.search-input-nav {
    border-radius: var(--spacing-3);
    border: 2px solid var(--secondary-50);
    overflow: hidden;
    background-color: var(--gray-scale-0);
}
.search-wrap-nav input[type="text"] {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-5);
    font: var(--body-lg);
    color: var(--gray-scale-90);
    border: 0;
    outline: 0;
    background-color: unset;
}
/*.search-wrap-nav input[type="text"]:focus {*/
/*    box-shadow: none;*/
/*}*/
.search-wrap-nav input[type="text"]::placeholder {
    color: var(--gray-scale-60);
}
.search-input-nav:has(input[type="text"]:focus-visible) {
    outline: 3px dashed var(--gray-scale-100);
}
.btn-search-nav {
    font-size: 18px;
    color: var(--gray-scale-90);
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mobile-nav-control {
    display: none;
}

.open-submenu .submenu-area {
    display: flex;
}
.open-search .search-wrap-nav {
    display: block;
}
.open-submenu .nav-open {
    display: none;
}
.open-submenu .nav-backdrop, .open-search .nav-backdrop {
    display: block;
}
/* page-title */
.breadcrumb-wrap {
    background-color: var(--bg-2);
    border-bottom: 1px solid var(--stroke-1);
}
.breadcrumb-box {
    gap: var(--spacing-4);
    padding: var(--spacing-2) 0;
    flex-wrap: wrap;
}
.breadcrumb-box a, .breadcrumb-box button {
    display: block;
    font: var(--detail-md);
    color: var(--gray-scale-100);
    white-space: nowrap;
    line-height: 32px!important;
    border-radius:var(--spacing-3);
    transition:all .2s ease;
}
.breadcrumb-box .dropdown-toggle:hover {
    background-color:var(--secondary-10);
}
.breadcrumb-box a.active, .breadcrumb-box button.active {
    font: var(--title-lg);
    color: var(--primary-60);
    cursor:default;
}
.breadcrumb-box button:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
    outline-offset:-1px;
}
.page-controls a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    font-size: 18px;
    color: var(--gray-scale-100);
    background-color: var(--secondary-5);
    border-left: 1px solid var(--stroke-2);
    border-radius: 0;
}
.page-controls a:last-child {
    border-right: 1px solid var(--stroke-2);
}
.page-controls a:hover {
    background-color: var(--gray-scale-20);
}
.bookmark-btn .fa-solid {
    display: none;
    color:var(--warning-50);
}
.bookmark-btn.active .fa-solid{
    display: inline-block;
}
.bookmark-btn.active .fa-regular{
    display: none;
}
.breadcrumb-wrap .toolbar-nav {
    right:auto;
    left: -0.75em;
    border: 1px solid var(--stroke-1);
    border-top: 0;
    background-color: var(--bg-2);
    border-radius: 0 0 var(--spacing-3) var(--spacing-3);
    padding:0!important;
}
.breadcrumb-wrap .toolbar-nav li a {
    padding: var(--spacing-2) var(--spacing-4);
}
@media (max-width:1024px) {
    .breadcrumb-wrap .toolbar-nav-wrap .fa-caret-down {
        display:none;
    }
}
/* ------------------------------------- footer ------------------------------------- */
.page-guide {
    border-width: 1px 0 0 0;
    padding: 24px 0;
}
.page-contact {
    background-color: var(--bg-2);
    padding: var(--spacing-5) 0;
    font: var(--detail-md);
    color: var(--gray-scale-100);
    border-top: 1px solid var(--stroke-2);
}
.page-contact span {
    font: var(--detail-md-b);
}
.footer-left {
    gap: 70px;
}
.footer-right {
    gap: 30px;
}
.quick-menu-foot {
    gap: var(--spacing-8);
}
.quick-menu-foot a {
    font: var(--body-md);
    color: var(--gray-scale-100);
}
.quick-menu-foot span {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--gray-scale-40);
}
.footer-contents {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
.footer-contact {
    font:var(--detail-md);
    color: var(--gray-scale-60);
    gap: var(--spacing-10);
}
.family-site-wrap {
    position: relative;
}
.family-site-select {
    width:300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font:var(--body-sm);
    padding: var(--spacing-5) var(--spacing-6);
    border:1px solid var(--gray-scale-100);
    border-radius: 12px;
    color: var(--gray-scale-100);
    background-color: var(--gray-scale-0);
    cursor: pointer;
}
.family-site-select:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
.family-site-list {
    position: absolute;
    z-index:2;
    bottom: calc(100% + 4px);
    width: 300px;
}
.family-site-option a {
    display: block;
    padding: var(--spacing-5) var(--spacing-6);
    border: 1px solid var(--gray-scale-30);
    color: var(--gray-scale-100);
    background-color: var(--gray-scale-0);
    border-bottom: 0;
    border-radius: 0;
}
.family-site-option a:hover {
    background-color: var(--gray-scale-10);
}
.family-site-option a:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
.family-site-option:first-child a {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.family-site-option:last-child a {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom: 1px solid var(--gray-scale-30);
}
.sns-wrap {
    gap: var(--spacing-3);
}

.sns-wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 28px;
    border-radius: var(--spacing-3);
}
.sns-wrap a:hover {
    filter: brightness(0.9);
}
.sns-wrap a:hover {
    background-color: var(--gray-scale-10);
}
.sns-wrap a:active img {
    filter: brightness(0.85);
}
.sns-wrap a:active {
    background-color: var(--gray-scale-20);
}
.sns-wrap a:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}

footer.dark {
    background-color: var(--gray-scale-80);
}
footer.dark .quick-menu-foot a {
    color: var(--gray-scale-30);
}
footer.dark .quick-menu-foot a.fw-bold {
    color: var(--gray-scale-0);
}
.quick-menu-foot a:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
footer.dark .sns-wrap a {
    background-color: var(--gray-scale-0);
}
footer.dark .footer-contact {
    color: var(--gray-scale-50);
}
    /* -------------------------------------- main -------------------------------------- */
.main-controls {
    width: 100%;
    position: absolute;
    bottom: 0;
}
.main-slider-nav {
    display: flex;
    justify-content: flex-end;
    padding: var(--spacing-7) var(--spacing-10);
    color: var(--gray-scale-0);
    gap: var(--spacing-4);
    align-items: stretch;
}
.slider-counter-wrap {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-6);
    gap: var(--spacing-6);
    background-color: #ffffff59;
    border-radius: var(--spacing-10);
}
.slider-counter-wrap .btn {
    padding: 0 var(--spacing-2);
}
.slider-counter-wrap .btn:hover {
   opacity: 0.9;
}
.slider-counter-wrap .btn:active {
    opacity: 0.8;
}
.slider-counter-wrap .btn:focus-visible {
    box-shadow: 0 0 10px var(--secondary-30);
}
.slide-control-btn {
    width: 42px; height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-scale-0);
    color: var(--gray-scale-100);
    border-radius: 50%;
}
.main-slider-nav .btn:focus-visible {
    outline-color: var(--gray-scale-0)!important;
}
.slider-counter-wrap button {
    color: var(--gray-scale-0);
    line-height: 1;
}
.slider-counter {
    width: 50px;
    text-align: center;
    font: var(--label-lg-b);
}
.quick-men {
    align-items: stretch;
}
.quick-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /*background-color: var(--secondary-50);*/
    color: var(--gray-scale-0);
    font: var(--body-lg);
    height: 84px;
    border: 1px solid rgba(0,134,230, 0.2);
    padding: var(--spacing-5);
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    border-radius: 0;
}
.quick-menu a:first-child {
    border-top-left-radius: 8px;
}
.quick-menu a:last-child {
    border-top-right-radius: 8px;
}
.quick-menu .btn-secondary {
    backdrop-filter: blur(5px);
    transition: background .2s ease;
    background:rgba(0,134,230, 0.3);
}
.quick-menu .btn-secondary:active {
    background-color: var(--secondary-60);
}
.quick-menu .btn-secondary:focus-visible {
     outline: 3px dashed var(--gray-scale-0);
 }
/* search-wrap */
.search-contents {
    background-color: var(--gray-scale-10);
    padding: var(--spacing-6) var(--spacing-7) var(--spacing-8);
    position: relative;
}
.search-input-wrap {
    display: flex;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}
.search-contents:first-child {
    border-top-left-radius: var(--spacing-5);
    border-top-right-radius: var(--spacing-5);
}
.search-contents:has(.search-submit-wrap) {
    border-bottom-left-radius: var(--spacing-5);
    border-bottom-right-radius: var(--spacing-5);
    border-bottom:0;
    padding: 0;
}

.search-contents.mobile-hide {
    border-top: 1px solid var(--stroke-2);
    padding-bottom:0;
}
.input-title {
    font: var(--label-sm-b);
    color: var(--gray-scale-90);
    margin-bottom: var(--spacing-3);
}

.search-submit-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    transform:translate(-20px, -20px);
    border:none!important;
}
.date-input {
    gap: var(--spacing-3);
}
.date-input input {
    width: fit-content;
}
.input-icon {
    color: var(--gray-scale-60);
}
/* title */
h3 {
    font: var(--title-xl);
    color: var(--gray-scale-100);
}
@media (max-width:768px) {
    .search-submit-wrap {
        width: 100%;
        transform:none;
        padding:0 var(--spacing-6) var(--spacing-7);
    }
    .search-submit-wrap .btn {
        width: 100%;
    }
}
/* ----------------------------- contents-start ----------------------------- */
/*  box  */
.box-contents {
    background-color: var(--gray-scale-0);
    border-radius: var(--spacing-3);
    border: 1px solid var(--stroke-1);
    padding: var(--spacing-6) var(--spacing-7);
    position: relative;
    font:var(--body-md);
}
.box-contents .absolute-item {
    position: absolute;
    top:var(--spacing-6);
    right: var(--spacing-7);
}
.box-contents-foot {
    display: flex;
    justify-content: space-between;
    padding-top: var(--spacing-5);
    border-top: 1px solid var(--stroke-1);
}
.thumb-box {
    overflow: hidden;
    border-radius: var(--spacing-3);
}
.thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.box-contents .detail {
    padding: var(--spacing-4);
}
.summary {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.t-line-1 {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.t-line-2{
    height: calc(1.5em * 2);
    -webkit-line-clamp: 2;
}
.t-line-3{
    height: calc(1.5em * 3);
    -webkit-line-clamp: 3;
}
.t-line-4{
    height: calc(1.5em * 4);
    -webkit-line-clamp: 4;
}
.t-line-5{
    height: calc(1.5em * 5);
    -webkit-line-clamp: 5;
}
.t-line-6{
    height: calc(1.5em * 6);
    -webkit-line-clamp: 6;
}
.contents-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-5);
}
/*.contents-list li {*/
/*    width: 34%;*/
/*}*/
.contents-list li * {
    display: inline-block;
}
.contents-list li .title {
    width: auto;
    color: var(--gray-scale-60);
}
.contents-list li .value {
    font: var(--body-lg-b);
    color: var(--gray-scale-100);
}
.list-style-dot li {
    padding-left: var(--spacing-4);
    position: relative;
}
.list-style-dot li::before {
    content: '';
    display: block;
    position: absolute;
    width: 4px;height: 4px;border-radius: 2px;
    top: 14px;
    left: 0;
    background-color: var(--gray-scale-60);
}

/* skip-nav */
.skip-nav a {
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 9999;
    top: -100%;
    padding: var(--spacing-3);
    background-color: var(--alpha-85);
    color:var(--gray-scale-0);
}
.skip-nav a:focus, .skip-nav:active {
    top: 0;
}

@media (max-width:1024px) {
    .mobile-column {
        flex-direction: column!important;
        align-items: flex-start!important;
    }
    .mobile-column.row {
        gap: var(--spacing-6)!important;
    }
    .mobile-column > .col {
        width: 100%!important;
    }
    .mobile-column-reverce {
        flex-direction: column-reverse!important;
    }
    .mobile-column-reverce > .col {
        width: 100%!important;
    }
    .search-word-list .flex-box {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .search-word-list button {
        width: fit-content;
    }
    .box-contents.search-word-list {
        position: static;
    }
    .mobile-100 {
        width: 100%!important;
    }
    .absolute-item.mobile-item {
        position: initial!important;
        width: 100%!important;
        margin-top: var(--spacing-3)!important;
    }
    .mobile-angle {
        transform: rotate(90deg);
    }
    select {
        min-width:unset;
         max-width: 300px;
         text-overflow:ellipsis;
    }
}
@media (max-width:768px) {
    .mobile-md-column {
        flex-direction: column!important;
        align-items: flex-start!important;
    }
    .mobile-md-column.row {
        gap: var(--spacing-6)!important;
    }
    .mobile-md-column > .col {
        width: 100%!important;
    }
    .mobile-md-100 {
        width: 100%!important;
    }
    .mobile-md-angle::before {
        transform: rotate(90deg);
    }
    .absolute-item.mobile-md-item {
        position: initial!important;
        width: 100%!important;
        margin-top: var(--spacing-3)!important;
    }
    .date-input {
        flex-wrap:wrap;
    }
}
@media (max-width:390px) {
    .btn {
        white-space: normal;
        word-break: keep-all;
    }
    .mobile-sm-column {
        flex-direction: column!important;
        align-items: flex-start!important;
    }
    .mobile-sm-column.row {
        gap: var(--spacing-6)!important;
    }
    .mobile-sm-column > .col {
        width: 100%!important;
    }
    .mobile-sm-100 {
        width: 100%!important;
    }
    .absolute-item.mobile-sm-item {
        position: initial!important;
        width: 100%!important;
        margin-top: var(--spacing-3)!important;
    }
}
/* accordion */
.accordion-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-5) var(--spacing-6);
    background-color: var(--bg-2);
    font:var(--title-lg);
    border-top: 1px solid var(--stroke-2);
    color: var(--gray-scale-100);
    border-radius: 0;
}
.accordion-head:hover {
    background-color: var(--gray-scale-20);
}
.accordion-head:active {
    background-color: var(--gray-scale-30);
}
.accordion-head:focus {
    background-color: var(--information-10);
}
.accordion-head:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
.accordion-wrap {
    border-bottom: 1px solid var(--stroke-2);
}
.accordion-body {
    padding: var(--spacing-5) var(--spacing-6);
    border-top: 1px solid var(--stroke-2);
    font: var(--body-md);
    color: var(--gray-scale-90);
    overflow-x: auto;
}
.accordion-option-wrap {
    background-color: var(--bg-0);
    border-radius: var(--spacing-5);
    border-bottom: 0;
}
.accordion-option-wrap .accordion-head {
    font: var(--title-md);
    background-color: unset;
    border: 0 !important;
    padding: var(--spacing-4);
    justify-content: flex-start;
    gap: 10px;
}
.accordion-option-wrap .accordion-body {
    border-top: 0;
}
/* table */
.table {
    table-layout: fixed;
    border-spacing: 0;
    width: 100%;
    border-bottom: 1px solid var(--stroke-2);
    border-right: 1px solid var(--stroke-2);
}
.table-wrap {
    width: 100%;
    overflow-x: auto;
}
.table-wrap-horizen {
    min-width: 920px;
}
.table-wrap-hover tbody .active,
.table-wrap-hover tbody tr.active > td {
    background-color: #e2effd;
}
.table-wrap-hover tbody tr{
    border-radius: 5px;
    padding: 0 5px;
    cursor: pointer;
}
.table-wrap-hover tbody tr:hover {
    background-color: var(--bright);
}
.table td, .table th {
    border: 1px solid var(--stroke-2);
    border-right: 0;
    border-bottom: 0;
    font: var(--body-sm);
    padding: var(--spacing-5) var(--spacing-3);
    background-color: var(--bg-0);
    overflow: hidden;
    text-overflow: ellipsis;
}
.table th {
    background-color: var(--bg-2);
    background-color: var(--information-5);
    font: var(--detail-md-b);
}
/*.table thead th {
    border-top: 0;
}*/
/*.table thead tr:last-child th {
    border-bottom: 4px double var(--stroke-2);
}*/
/*.table tr td:last-child, .table th:last-child {
    border-right: 1px solid var(--stroke-2);
}*/
/*.table tr:first-child td{
    border-top: 0;
}*/
/*.table thead tr:first-child th {
    border-top: 3px solid  var(--stroke-2)!important;
}*/
.table thead tr:not(:first-child) th {
    border-top: 1px solid  var(--stroke-2)!important;
}
.table:not(:has(thead)) tr:first-child td,
.table:not(:has(thead)) tr:first-child th{
    border-top: 1px solid  var(--stroke-2)!important;
}
.table thead th.has-bottom-border {
    border-bottom: 4px double var(--stroke-2)!important;
}
/*thead + tbody tr:first-child td {*/
/*    border-top: 1px solid var(--stroke-2);*/
/*}*/
tbody tr:first-child th {
    border-top: 1px solid var(--stroke-2);
}
.table tfoot td {
    background-color: var(--bg-2);
    border-top: 1px solid var(--stroke-2);
}


/* tab */
.tab-btn-wrap .btn.active {
    color: var(--gray-scale-0);
    background-color: var(--secondary-50);
}
.tab-btn-wrap .btn:focus-visible {
    outline-offset: -1px;
}
.btn-secondary:active {
    background-color: var(--secondary-60);
}
.btn-secondary:hover {
    background-color: var(--secondary-40);
}
.list-value-select {
    border:1px solid var(--stroke-1);
}
.list-value-select li:not(:last-child) {
    border-bottom:1px solid var(--stroke-1);
}
.list-value-select li a {
    padding: var(--spacing-5) var(--spacing-6);
    display: block;
}
.list-value-select li:not(.active) {
    background-color: var(--gray-scale-5);
}
.list-value-select li:not(.active) span {
    color: var(--gray-scale-60);
}
.list-value-select li.active {
    outline-offset: 2px;
    outline: 3px solid var(--secondary-50);
}
.list-value-select li.active a {
    color: var(--gray-scale-100);
}
.list-value-select li:not(.active) a:hover {
    background-color: var(--gray-scale-20);
}
.list-value-select li:not(.active) a:active {
    background-color: var(--gray-scale-30);
}
.obj-img {
    position: relative;
}
.obj-img img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
.white-gradient::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%; height: 100%;
    top: 0;left: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1));
}
.guide-contents .title {
    font: var(--title-xl);
}
.guide-contents .title::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url("../_images/infor-icon.svg");
    background-size : contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: var(--spacing-2);
    margin-bottom: -3px;
}
.guide-list li {
    position: relative;
    padding-left: var(--spacing-5);
}
.guide-list li::before {
    content: '';
    display: block;
    width: 8px; height: 8px;
    position: absolute;
    left:0; top:8px;
    background-color: var(--secondary-50);
    transform:rotate(45deg);
}
.box-contents:has(.guide-list) {
    padding-left: 280px!important;
    background-image: linear-gradient(90deg, var(--secondary-10) 5%, transparent 20%);
}
.box-contents:has(.guide-list) .guide-img {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 180px;
    transform:translateY(-50%);
}
*:has(.bookmark-img) {
    position:relative;
}
.bookmark-img {
    width: 64px;
    position: absolute;
    right: 30px;
    top: -8px;
}

@media screen and (max-width: 1024px) {
    .box-contents:has(.guide-list) {
        padding-left: 230px!important;
        background-image: linear-gradient(90deg, var(--secondary-10) 10%, transparent 30%);
    }
    .box-contents:has(.guide-list) .guide-img {
        width: 150px;
    }
}
@media screen and (max-width: 768px) {
    .box-contents:has(.guide-list) {
        padding-left: var(--spacing-5)!important;
        background-image:none;
    }
    .box-contents:has(.guide-list) .guide-img {
        display:none;
    }
}
/* ----------------------------- contents-end ----------------------------- */

/* ----------------------------- sitemap-start ----------------------------- */

.site-map-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 36px 24px;
}
.site-map-wrap a {
    border-radius:0;
}
.site-map-wrap .menu-min-wrap {
    min-width: fit-content;
}
.min-menu li:not(.active, .has-sub) a:hover {
    background-color: var(--gray-scale-10);
}
.min-menu li:not(.active, .has-sub) a:active {
    background-color: var(--gray-scale-20);
}
.min-sub li a {
    border-bottom: 1px solid var(--secondary-5);
    background-color: var(--secondary-5);
}
.min-sub {
    border-bottom: 1px solid var(--stroke-2);
}
@media screen and (max-width: 1500px) {
    .site-map-wrap .min-menu li {
        width: calc((100vw / 5) - var(--spacing-inner) - 4px);
    }
}
@media screen and (max-width: 1200px) {
    .site-map-wrap {
        justify-content: flex-start;
        gap: 24px;
    }
}
@media screen and (max-width: 1024px) {
    .site-map-wrap {
        justify-content: flex-start;
        gap: 12px;
    }
    .site-map-wrap .menu-min-wrap {
        flex: 1;
    }
    .site-map-wrap .min-menu li {
        width: calc((100vw / 3) - var(--spacing-inner) - 8px);
    }
    .mypage-wrap .min-menu {
        flex-wrap: wrap;
        flex-direction: row;
    }
    .mypage-wrap .min-menu li {
        width: calc((100% / 3) - var(--spacing-2));
    }
}
@media screen and (max-width: 768px) {
    .min-menu li a {
        padding: 10px;
    }
    .site-map-wrap .min-menu li {
        width: calc(45vw - 12px);
    }
    .mypage-wrap .min-menu li {
        width: calc((100% / 2) - var(--spacing-2));
    }
}
@media screen and (max-width: 390px) {
    .site-map-wrap .min-menu li {
        width: calc(90vw);
    }
    .min-menu {
        max-height: none;
    }
}
/* ------------------------------- sitmap-end ------------------------------ */
/* ----------------------------- history-start ----------------------------- */

.history-group{
    display: flex;
}
.history-group .year {
    position: relative;
    border-right:1px solid var(--stroke-2);
    padding: 0 var(--spacing-3);
    font: var(--heading-md);
    color:var(--secondary-50);
    width: 30%;
    max-width: 320px;
    min-width: 120px;
    line-height: 120%;
}
.history-group .year::after {
    content: '';
    display: block;
    position: absolute;
    right: -12px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--gray-scale-0);
    border:4px solid var(--secondary-50);
    z-index:2;
}
.history-detail {
    width: 70%;
    padding: var(--spacing-8) var(--spacing-10);
}
.history-detail > li {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    margin-bottom: var(--spacing-5);
}
.history-detail > li:last-child {
    margin-bottom: 0;
}
.history-detail .month {
    font: var(--title-lg);
    color: var(--gray-scale-60);
}
.history-detail .summary {
    font: var(--body-lg);
    word-break: keep-all;
}
.history-display {
    border-radius: var(--spacing-4);
    border-bottom-right-radius: 0;
    overflow: hidden;
    max-height: 900px;
}
@media screen and (max-width: 1500px) {
    .history-group .year span:last-child {
        display: block;
    }
}
@media screen and (max-width: 1024px) {
    .history-display {
        max-height: 200px;
        margin-bottom: var(--spacing-4);
    }
}
@media screen and (max-width: 768px) {
    .history-detail > li {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
        margin-bottom: var(--spacing-6);
    }
    .history-group  {
        flex-direction: column;
    }
    .history-group .year {
        font: var(--heading-sm);
        border-right: 0;
        border-bottom:1px solid var(--stroke-2);
        border-top:1px solid var(--stroke-2);
        width: 100%;
        max-width: none;
        padding:var(--spacing-3);
    }
    .history-group .year::after {
        top:auto;
        right: 0;
        bottom: -12px;
    }
    .history-detail {
        width: 100%;
        padding:var(--spacing-5) var(--spacing-5) var(--spacing-8);
    }
    .history-group .year span:last-child {
        display: inline;
    }
}
/* ----------------------------- history-end ----------------------------- */
/* ------------------------------ alert-start ------------------------------*/
.swal-overlay {
    font-size: 16px;
    background-color: var(--alpha-65);
}
.swal-modal {
    border-radius: var(--spacing-4);
}
.swal-title {
    color: var(--gray-scale-100);
    font: var(--heading-sm);
    line-height: 120%;
}
.swal-text {
    color: var(--gray-scale-90);
    font: var(--body-md);
    margin-bottom: var(--spacing-4);
    padding: 0 var(--spacing-6);
    word-break: keep-all;
}
.swal-title:not(:first-child) {
    margin-bottom: 0;
}
.swal-overlay--show-modal .swal-modal {
    will-change: unset;
}
.swal-button-container {
    display: flex;
    gap: var(--spacing-3);
    width: 100%;
    margin: 0;
    margin-bottom: var(--spacing-4);
}
.swal-button-container:last-child {
    margin-bottom: 0;
}
.swal-button-container button {
    width: 100%;
}

/* --------------------- class-start --------------------- */

/* text-class */
.display-lg {font:var(--display-lg)!important;}
.display-md {font:var(--display-md)!important;}
.display-sm {font:var(--display-sm)!important;}

.heading-lg {font:var(--heading-lg)!important;}
.heading-md {font:var(--heading-md)!important;}
.heading-sm {font:var(--heading-sm)!important;}

.title-2xl {font:var(--title-2xl)!important;}
.title-xl {font:var(--title-xl)!important;}
.title-lg {font:var(--title-lg)!important;}
.title-md {font:var(--title-md)!important;}
.title-sm {font:var(--title-sm)!important;}
.title-xs {font:var(--title-xs)!important;}

.body-lg {font:var(--body-lg)!important;}
.body-md {font:var(--body-md)!important;}
.body-sm {font:var(--body-sm)!important;}
.body-lg-b {font:var(--body-lg-b)!important;}
.body-md-b {font:var(--body-md-b)!important;}
.body-sm-b {font:var(--body-sm-b)!important;}

.detail-lg {font:var(--detail-lg)!important;}
.detail-md {font:var(--detail-md)!important;}
.detail-sm {font:var(--detail-sm)!important;}
.detail-lg-b {font:var(--detail-lg-b)!important;}
.detail-md-b {font:var(--detail-md-b)!important;}
.detail-sm-b {font:var(--detail-sm-b)!important;}

.label-lg {font:var(--label-lg)!important;}
.label-md {font:var(--label-md)!important;}
.label-sm {font:var(--label-sm)!important;}
.label-xs {font:var(--label-xs)!important;}
.label-lg-b {font:var(--label-lg-b)!important;}
.label-md-b {font:var(--label-md-b)!important;}
.label-sm-b {font:var(--label-sm-b)!important;}
.label-xs-b {font:var(--label-xs-b)!important;}

.links-lg {font:var(--links-lg)!important;}
.links-md {font:var(--links-md)!important;}
.links-sm {font:var(--links-sm)!important;}
.links-lg-b {font:var(--links-lg-b)!important;}
.links-md-b {font:var(--links-md-b)!important;}
.links-sm-b {font:var(--links-sm-b)!important;}

.t-c-normal {color: var(--gray-scale-100)!important;}
.t-c-summary {color: var(--gray-scale-60)!important;}
.t-c-disable {color: var(--gray-scale-50)!important;}
.t-c-secondary {color: var(--secondary-50)!important;}
.t-c-primary {color: var(--primary-50)!important;}

.t-c-success{color: var(--success-text);}
.t-c-warning{color: var(--warning-text);}
.t-c-information{color: var(--information-text);}
.t-c-danger{color: var(--danger-text);}

.line-h-1 {line-height: 1!important;}
/* bg-class */
.bg-0 {background-color: var(--bg-0)!important;}
.bg-1 {background-color: var(--bg-1)!important;}
.bg-2 {background-color: var(--bg-2)!important;}
.bg-3 {background-color: var(--bg-3)!important;}

.bg-success{color: var(--success-surface);}
.bg-warning{color: var(--warning-surface);}
.bg-information{color: var(--information-surface);}
.bg-danger{color: var(--danger-surface);}

/* spacing-class */
.mb-2{margin-bottom: var(--spacing-1)!important;}
.mb-4{margin-bottom: var(--spacing-2)!important;}
.mb-8{margin-bottom: var(--spacing-3)!important;}
.mb-12{margin-bottom: var(--spacing-4)!important;}
.mb-16{margin-bottom: var(--spacing-5)!important;}
.mb-18{margin-bottom: 18px!important;}
.mb-20{margin-bottom: var(--spacing-6)!important;}
.mb-24{margin-bottom: var(--spacing-7)!important;}
.mb-32{margin-bottom: var(--spacing-8)!important;}
.mb-40{margin-bottom: var(--spacing-9)!important;}
.mb-44{margin-bottom: var(--spacing-10)!important;}
.mb-72{margin-bottom: 4.25em!important;}

.mt-2{margin-top: var(--spacing-1)!important;}
.mt-4{margin-top: var(--spacing-2)!important;}
.mt-8{margin-top: var(--spacing-3)!important;}
.mt-12{margin-top: var(--spacing-4)!important;}
.mt-16{margin-top: var(--spacing-5)!important;}
.mt-20{margin-top: var(--spacing-6)!important;}
.mt-24{margin-top: var(--spacing-7)!important;}
.mt-32{margin-top: var(--spacing-8)!important;}
.mt-40{margin-top: var(--spacing-9)!important;}
.mt-44{margin-top: var(--spacing-10)!important;}
.mt-72{margin-top: 4.25em!important;}

.ml-2{margin-left: var(--spacing-1)!important;}
.ml-4{margin-left: var(--spacing-2)!important;}
.ml-8{margin-left: var(--spacing-3)!important;}
.ml-12{margin-left: var(--spacing-4)!important;}
.ml-16{margin-left: var(--spacing-5)!important;}
.ml-20{margin-left: var(--spacing-6)!important;}
.ml-24{margin-left: var(--spacing-7)!important;}
.ml-32{margin-left: var(--spacing-8)!important;}
.ml-40{margin-left: var(--spacing-9)!important;}
.ml-44{margin-left: var(--spacing-10)!important;}

.mr-2{margin-right: var(--spacing-1)!important;}
.mr-4{margin-right: var(--spacing-2)!important;}
.mr-8{margin-right: var(--spacing-3)!important;}
.mr-12{margin-right: var(--spacing-4)!important;}
.mr-16{margin-right: var(--spacing-5)!important;}
.mr-20{margin-right: var(--spacing-6)!important;}
.mr-24{margin-right: var(--spacing-7)!important;}
.mr-32{margin-right: var(--spacing-8)!important;}
.mr-40{margin-right: var(--spacing-9)!important;}
.mr-44{margin-right: var(--spacing-10)!important;}

/* --------------------- class-end ---------------------- */

/* --------------------- responsive --------------------- */
@media screen and (max-width: 1800px) {
    .footer-left{
        gap: var(--spacing-7);
    }
    .quick-menu-foot {
        gap: var(--spacing-6);
    }
    .footer-right {
        gap: var(--spacing-5);
    }
    .family-site-list, .family-site-select {
        width: 260px;
    }
}
@media screen and (max-width: 1440px) {
    body {
        padding-top: 180px;
    }
    :root {
        --spacing-inner: 44px;
        --spacing-inner-r: -44px;
    }
    .post-reply {
        max-width: 974px;
    }

    .gallery-box {
        width: calc(100% / 3 - 30px);
        height: 280px;
    }
    .nav > li:not(:last-child) > a {
        font: var(--title-md);
    }
    .nav-search {
        margin-right: 30px;
    }
    /*.integratedSearch {*/
    /*    max-width: 110px;*/
    /*}*/
    .search-wrap-nav {
        max-width: 1024px;
    }
    .footer-left {
        align-items: flex-start;
        flex-direction: column;
    }
    .footer-contents {
        gap: var(--spacing-5);
    }
}

@media screen and (max-width: 1200px) {
    body {
        padding-top: 121px;
    }
    :root {
        --spacing-inner: 32px;
        --spacing-inner-r: -35px;
    }
    .nav-wrap > div {
        justify-content: center;
    }
    .nav-wrap {
        z-index: 3;
    }
    #nav-search {
        display:none;
    }
    /*.main-top-nav,
    .nav {
        display: none;
    }*/
    .mobile-nav-control {
        display: flex;
        position: relative;
    }
    .mobile-nav-control > * {
        width: 100%;
    }
    .mobile-nav-control a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font: var(--label-md);
        color: var(--gray-scale-60);
        padding: var(--spacing-3);
    }
    .submenu-area {
        height : calc(100vh - 60px);
        padding-right: var(--spacing-inner);
        padding-top: var(--spacing-3);
        flex-direction: column;
        gap: 0;
        border-radius: 0;
    }

    .nav-btn, .search-mobile-item {
        width: 60px; height: 60px;
        position: absolute;
        justify-content: center; align-items: center;
        padding: 0;
        font:var(--title-xl);
    }
    .search-mobile-item {
        display: flex;
        right: 0;
    }
    .nav-close {
        display: none;
        left: 0;
    }
    .nav-open {
        display: flex;
        left: 0;
    }
    .open-submenu .nav-close {
        display: flex;
    }
    .open-submenu .nav-open {
        display: none;
    }

    .nav-mobile-controls {
        display: flex;
        width: 100%;
        padding: 20px 0;
        border-bottom: 1px solid var(--box-border);
    }

    .nav {
        position:fixed;
        flex-direction: column;
        align-items: flex-start;
        max-width:unset;
        gap: 0;
        padding:0;
        height: calc(100vh - 79px );
        overflow-y: auto;
    }

    .nav>li .submenu a {
        display: block;
    }
    .mobile-1depth {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font: var(--title-lg);
        color: var(--gray-scale-100);
        padding: var(--spacing-4) var(--spacing-3) ;
        border-top: 1px solid var(--stroke-2);
    }
    .mobile-1depth i {
        color: var(--gray-scale-60);
    }
    .submenu-wrap {
        border-left: 0;
    }
    .submenu-wrap:last-child .mobile-1depth {
        border-bottom: 1px solid var(--stroke-2);
    }
    .mobile-submenu-hide {
        display: none;
    }
    .submenu {
        background-color: var(--bg-2);
        border-top: 1px solid var(--stroke-2);
    }
    .submenu-area .submenu {
        padding-bottom: var(--spacing-3);
    }
    .submenu-2 {
        margin: 0 var(--spacing-3) 0 0;
        background: var(--gray-scale-0);
    }
    .submenu-2 a:hover {
        background: var(--gray-scale-10);
    }
    .submenu-wrap:last-child .submenu {
        border-top: 0;
        border-bottom: 1px solid var(--stroke-2);
    }

/*    .nav>li:not(:last-child)>a {
        font-size: 1.71em;
        font-weight: 700;
        align-items: flex-start;
    }*/

    .nav>li:not(:last-child)>a:hover::after,
    .nav>li.active>a::after {
        width: 100%;
    }

    .nav li:not(:last-child)>.submenu,
    .nav li:not(:last-child)>.submenu>li>.submenu {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        padding: 5px 0;
        border: 0;
        border-radius: 0;
        background-color: var(--white);
    }

    .nav li:not(:last-child)>.submenu>li>.submenu {
        left: 30px;
    }

    .nav li:not(:last-child)>.submenu>li>.submenu,
    .nav li:not(:last-child)>.submenu {
        padding: 0;
    }

    .nav li:not(:last-child)>.submenu>li>.submenu>li {
        padding: 8px 15px;
    }

    .nav li:not(:last-child)>.submenu>li {
        padding: 10px 0;
    }

    .nav-search {
        position: absolute;
        display: flex;
        gap: 5px;
        bottom: 0;
        padding: 15px 30px;
        width: calc(100% - 60px);
        margin: 0;
    }

    .nav-search .btn-search {
        position: unset;
        transform: none;
        padding: 8px 9px;
        border-radius: 50%;
        color: var(--white);
        background-color: var(--primary);
    }

    .integratedSearch {
        width: 100%;
        max-width: 100%;
        font-size: 1em;
    }

    .nav-control-btn {
        display: none !important;
    }
    .mobile-title {
        display: inline-block;
    }
    .nav-control {
        display: none;
    }

    .main-news-nav a {
        font: var(--title-md);
        padding: var(--spacing-4) var(--spacing-2);
    }
    .main-news-nav a.active::after {
        right: -4px;
        top: 6px;
    }
}
@media screen and (max-width: 1024px) {
    body {
        font-size: 14px;
        padding-top: 114px;
    }
    .profile-box {width: 100%}

    .mobile-flex-1-1-40, .mobile-flex-1-1-30 {
        flex-wrap: wrap;
    }
    .mobile-flex-1-1-40 > * {
        flex: 1 1 40%;
    }
    .mobile-flex-1-1-30 > * {
        flex: 1 1 30%;
    }
    /*.inner {*/
    /*    max-width: 900px !important;*/
    /*}*/

    .post-reply {
        max-width: 850px;
    }

    .double-box .contents-box {
        width: 100%;
    }

    .box-header h3 {
        margin: 0;
    }

    .gallery-min-wrap {
        flex-wrap: wrap;
        gap: 0;
        justify-content: space-between;
    }

    .gallery-min-wrap a {
        width: calc(50% - 10px);
    }

    .nav-search {
        margin-right: 30px;
    }

    .gallery-box {
        height: 260px;
    }

    footer .inner > div {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
        gap: var(--spacing-8);
    }
    .footer-right {
        width: 100%;
        justify-content: flex-end;
    }
    .quick-menu-foot {
        flex-wrap: wrap;
    }
    .quick-menu-foot a {
        white-space: nowrap;
    }
    /* ----------------------------------------- index-only ------------------------------------------- */
    .main-contents-1 {
        margin-bottom: 50px;
        gap: 50px;
    }

    .boards-wrap {
        padding: 70px 0;
    }
    .main-news-nav {
        flex-direction: row;
        gap: var(--spacing-4);
        padding: var(--spacing-3);
        width: 100%;
        overflow-x: auto;
    }
    .main-news-nav a {
        white-space: nowrap;
    }
    .main-news-nav a.active::after {
        width: 7px;
        height: 7px;
    }

    .badge {
        display: inline;
    }

    .mobile-hide {
        display: none;
    }

    .main-slider {
        height: 420px;
    }
    .slide-contents {
        padding-bottom: calc(var(--spacing-10) * 2.5);
    }
    .main-slider-nav {
        padding: var(--spacing-5) var(--spacing-6);
    }
    .main-subtitle {
         font: var(--heading-sm);
     }
    .main-title {
         font: var(--heading-lg);
     }
    /*.inner,*/
    /*.nav-inner {*/
    /*    max-width: 700px !important;*/
    /*    height: calc(100% - 65px);*/
    /*}*/

    .post-reply {
        max-width: 100%;
    }

    footer {
        padding: 40px 0 50px;
    }

    .footer-logo {
        margin-bottom: 15px;
    }

    .footer-txt {
        flex-direction: column;
        gap: 60px;
    }

    .adress span {
        display: block;
    }

    .footer-contact {
        width: 100%;
    }
    .visual-box {
        padding: var(--spacing-9) 0;
        background-position: center -80px;
    }

    .visual-box h2 {
        font: var(--title-xl);
    }

    .search-wrap {
        margin: 0 0 24px;
        padding: 34px;
        padding-left: var(--spacing-inner);
        padding-right: var(--spacing-inner);
    }

    .search-modul-btn {
        display: flex;
    }

    .search-modul-wrap {
        display: none;
        position: absolute;
        border-radius: 0 0 5px 5px;
        top: calc(100% + 15px);
        left: 0;
        width: calc(100% - 30px);
        padding: 15px;
        background-color: var(--white);
        border: 1px solid var(--box-border);
    }

    .search-modul-wrap>div {
        width: 100%;
    }

    .contents-wrap {
        padding: 40px 0 70px;
    }

    .list-body {
        margin-bottom: 35px;
        border: 0;
    }

    .board-list td {
        border: 0!important;
        padding: 0;
        display: inline-block;
    }

    .board-list,
    .board-list tbody,
    .board-list tbody tr,
    .td-title {
        display: block;
        width: 100%;
    }

    .table.board-list {
        border-bottom: 0 ;
        border-top: 0 ;
    }


    .board-list thead {
        display: none;
    }

    .board-list td span:last-child,
    .board-list td i {
        margin-right: 10px;
    }

    .board-list tbody tr {
        border: 1px solid var(--box-border);
        padding: var(--spacing-4) var(--spacing-5);
        border-radius: var(--spacing-3);
        margin-bottom: var(--spacing-3);
    }

    .board-list .td-title {
        margin: 10px 0;
        text-align: left;
    }

    .board-list .td-title .title-strong {
        font-weight: 700;
        color: var(--dark-txt);
        font-size: 1.2em;
    }

    .table .mobile-left {
        text-align: left;
    }

    .headless-table {
        border-top: 0;
    }

    .cntsContainer {
        padding: 30px 0 40px;
    }

    .reply-controls {
        top: 20px;
    }

    .reply-box {
        padding: 20px 10px;
    }
    .post-contents .post-head {
        flex-direction: column-reverse;
        padding: var(--spacing-7) var(--spacing-8);
    }
    .post-head h3 {
        font: var(--heading-sm);
    }
    .post-contents {
        padding-bottom: 60px;
        padding-top: 40px;
    }

    .re-reply {
        padding-left: 40px;
    }

    .re-reply::before {
        left: 10px;
    }

    .gallery-contents .box-body {
        padding: 20px 0;
    }

    .gallery-box {
        width: calc(50% - 30px);
        height: 300px;
    }

    .write-post-wrap .form-wrap:not(.btn-wrap) {
        flex-direction: column;
        gap: 0;
    }

    .file-upload {
        width: 100%;
    }

    .upload-notice {
        padding-top: 15px;
    }

    .write-contents {
        padding: 30px 0 50px;
    }

    .mypage-wrap .menu-min-wrap,
    .mypage-contents {
        width: 100%;
    }
    .mypage-wrap .menu-min-wrap {
        margin-bottom: var(--spacing-8);
    }
    .menu-min-wrap .menu-label {
        padding: var(--spacing-3) var(--spacing-4);
    }
    .mypage-wrap .min-menu {
        display: flex;
        gap: var(--spacing-2);
        margin-top: var(--spacing-3);
        overflow-x: auto;
        padding: var(--spacing-3);
    }

    .mypage-wrap .min-menu li a {
        border: 1px solid var(--box-border) !important;
        border-radius: 30px !important;
        text-align: center;
        padding: var(--spacing-3) var(--spacing-5);
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        height: 100%;
    }

    .contact-txt {
        padding: 30px;
        top: 50%;
        transform: translateY(-50%);
    }

    .contact-wrap {
        margin: 40px 0 60px;
    }
    .signin-progress {
        gap: 15px;
    }

}

@media screen and (max-width: 768px) {
    :root {
        --spacing-inner: 5%;
        --spacing-inner-r: -5%;
        --spacing-modal: 28px;
    }

    /*.inner,*/
    /*.nav-inner {*/
    /*    padding: 0 20px;*/
    /*    width: calc(100% - 40px) !important;*/
    /*}*/

    .date-input {
        align-items: center!important;
    }

    #topBtn {
        right: 15px;
    }

    .page-controls .print-btn {
        display: none;
    }
    .main-title {
        font: var(--heading-md);
        line-height: 120%;
    }
    .main-subtitle {
        font: var(--title-lg);
    }
    .news-daily, .news-monthly-rare {
        min-width: auto;
    }
    .slide-contents {
        padding-bottom: calc(var(--spacing-10)* 4);
    }
    .signin-progress {
        gap: 10px;
        justify-content: space-around;
        padding-bottom: var(--spacing-3);
        border-bottom: 3px solid var(--stroke-1);
        margin: 40px 0 20px;
    }
    .signin-progress .bar, .signin-progress .icon {
         display: none!important;
     }
    .signin-progress .pageMode {
        position: relative;
    }
    .signin-progress .pageMode.active::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: -10px;
        background-color: var(--secondary-50);
    }

        /* ----------------------------------------- index-only ------------------------------------------- */
    .main-contents {
        top: 85px;
        text-align: left;
    }

    .main-contents h2 {
        text-align: left;
        margin-bottom: 30px;
    }

    .main-contents h2 strong {
        display: block;
    }

    .main-contents .main-var {
        margin-left: 10px;
    }
    .main-slider-nav {
        padding: var(--spacing-5) 0;
    }
    .quick-menu {
        flex-wrap: wrap;
    }
    .quick-menu a {
        height: 66px;
        flex: 1 1 40%;
    }
    .quick-menu a:last-child {
        border-top-right-radius: 0;
    }
    .quick-menu a:nth-child(2) {
        border-top-right-radius: 8px;
    }

    .pagination li:not(.controls, .active, .max-lenth) {
        display: none;
    }

    .pagination li:not(.controls) a {
        border: 0;
        width: fit-content;
        height: fit-content;
        background-color: unset;
        font-size: 1.2em;
    }

    .pagination li:not(.controls) a:hover {
        background-color: unset;
    }

    .pagination li.active a {
        color: var(--primary);
    }

    .pagination .max-lenth a::before {
        content: '/';
        display: inline;
        margin-right: 10px;
    }

    .gallery-box {
        height: 250px;
    }

    .page-contact > div {
        flex-direction: column;
        align-items: flex-start;
    }
    .family-site-wrap, .family-site-select, .family-site-list {
        width: 100%;
        max-width: 260px;
    }
    .footer-contact {
        flex-direction: column;
        gap: var(--spacing-5);
    }
    .quick-menu-foot {
        gap: var(--spacing-3) var(--spacing-4);
    }
    .quick-menu-foot span {
        width: 0;
        height: 0;
    }
}

@media screen and (max-width: 390px) {
    body {
        padding-top: 88px;
    }
    .nav-logo {
        height: 32px;
    }
    .nav {
        height: calc(100vh - 55px);
    }
    .submenu-area {
         height : calc(100vh - 43px);
    }
    .search-box fieldset {
        flex-wrap: wrap;
    }

    .search-wrap * {
        width: 100%;
    }

    .search-wrap input[type="text"] {
        max-width: 100%;
        padding: 10px 15px;
    }

    .search-wrap .btn {
        padding: 10px 8px;
        border-radius: 30px;
    }

    .reply-send .btn {
        width: 100%;
    }

    .gallery-box {
        width: 100%;
        height: 300px;
    }

    .sign-header {
        padding-top: 30px;
    }

    .sign-contents {
        padding-bottom: 50px;
    }

    .signin-body {
        padding: 20px 20px 10px;
        margin-bottom: var(--spacing-7);
    }

    .mypage-contents .contents-box {
        padding: 10px 20px 20px;
    }

    .search-modul-wrap>div {
        flex-direction: column;
        gap: 5px;
    }

    .search-modul-wrap * {
        width: auto;
        border-radius: 30px !important;
    }

    .search-modul-wrap>div *:first-child {
        border-right: 1px solid var(--box-border);
    }

    .search-modul-wrap .btn {
        padding: 8px;
    }

    .th-side form {
        gap: 20px;
    }

    .th-side td,
    .th-side th {
        padding: 10px 10px 15px;
    }

    .post-wrap.post-answer {
        padding: 10px;
    }

    .post-contents .post-head {
        padding: 20px;
    }
    .date-input input, .date-input button {
        width: 100%;
    }
    .date-input {
        justify-content: center;
    }

}
.toast_message{
    opacity: 0;
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%,0);
    padding: 10px 50px;
    background: var(--information-surface);
    border-radius: 100px;
    color: var(--information-text);
    box-shadow: 3px 4px 11px 0 #00000040;
    transition: all 0.5s;
}

.toast_message.toast_on {
    opacity: 100%;
    bottom: 50px;
    z-index: 10000;
}

.opacity-8{
    opacity: 0.8;
}

.btn-success {
    color: var(--gray-scale-0);
    background-color: var(--success-50);
}

.btn-success:hover {
    background-color: var(--success-40);
}

.btn-success:active {
    background-color: var(--success-60);
}
.btn-success:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
.btn-danger {
    color: var(--gray-scale-0);
    background-color: var(--danger-50);
}

.btn-danger:hover {
    background-color: var(--danger-40);
}

.btn-danger:active {
    background-color: var(--danger-60);
}

.btn-danger:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
.chart-wrapper {
    overflow:hidden;
}
.chart-wrapper svg{
    display: block;
    margin: 0 auto;
}
.fix-thead {
    border-top:0;
}
.fix-thead thead {
    position:sticky;
    top:0;
    z-index: 2;
}
.fix-thead thead tr th {
    border-top:1px solid var(--stroke-2);
    border-bottom:1px solid var(--stroke-2);
}

.table-wrap:has(.fix-thead)::-webkit-scrollbar-track {
    background-color: var(--gray-scale-5);
    border-radius: 10px;
}

.table-wrap:has(.fix-thead)::-webkit-scrollbar-thumb {
    background-color: var(--gray-scale-30);
    border-radius: 10px;
    border: 1px solid var(--gray-scale-5);
}


/*.fix-thead thead + tbody tr:first-child td,*/
/*.table-point thead + tbody tr:first-child td {*/
/*    border-top:0;*/
/*}*/

.indxmin-subtable {
    position: relative;
}
.indxmin-subtable p {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -200%);
    white-space: nowrap;
}
.indxmin-subtable .table-wrap {
    height:532px;
}


@media screen and (max-width: 768px) {
    .indxmin-subtable p {
        position:static;
        transform:none;
    }
    .indxmin-subtable .table-wrap {
        height:400px;
    }
}
.banner-wrap {
    padding: var(--spacing-3) 0;
    background-color: var(--secondary-5);
    border-bottom: 1px solid var(--stroke-1);
    position: relative;
    z-index: 2001;
}

.news-weekly {
    flex-wrap: wrap;
    align-items: flex-end;
    height: 100%;
    gap: 0 15px;
}
.news-daily > *{
    flex:1 1 40%;
}
.news-weekly > * {
    flex:1 1 40%;
}
.news-weekly .box-contents .file-box:not(:nth-child(2)) {
    display:none;
}
.news-weekly .box-contents .file-box {
    display:block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-monthly .box-contents, .news-monthly-rare .box-contents {
    width: calc(20% - 10px);
    height: 200px;
}





/* tooltip */
.fade {
    transition: opacity .15s linear;
}

.dropdown-menu {
    --bs-dropdown-min-width: 10rem;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-font-size: 0.75rem;
    --bs-dropdown-color: var(--app-component-color);
    --bs-dropdown-bg: var(--app-component-dropdown-bg);
    --bs-dropdown-border-color: rgba(var(--app-component-color-rgb),  0.1);
    --bs-dropdown-border-radius: 4px;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-inner-border-radius: 4px;
    --bs-dropdown-divider-bg: rgba(var(--app-component-color-rgb),  0.1);
    --bs-dropdown-divider-margin-y: 0.46875rem;
    --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0,  0,  0,  0.15);
    --bs-dropdown-link-color: rgba(var(--app-component-color-rgb),  0.85);
    --bs-dropdown-link-hover-color: var(--app-component-color);
    --bs-dropdown-link-hover-bg: var(--app-component-dropdown-hover-bg);
    --bs-dropdown-link-active-color: var(--app-component-active-color);
    --bs-dropdown-link-active-bg: var(--app-component-active-bg);
    --bs-dropdown-link-disabled-color: #adb5bd;
    --bs-dropdown-item-padding-x: 0.9375rem;
    --bs-dropdown-item-padding-y: 0.309375rem;
    --bs-dropdown-header-color: var(--app-component-color);
    --bs-dropdown-header-padding-x: 0.9375rem;
    --bs-dropdown-header-padding-y: 0.5rem;
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: var(--bs-dropdown-min-width);
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    margin: 0;
    /* font-size: var(--bs-dropdown-font-size); */
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
   /*  background-color: var(--bs-dropdown-bg); */
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
}
.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: 0;
    margin-top: var(--bs-dropdown-spacer);
}
.dropdown-menu-start {
    --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
    right: auto;
    left: 0;
}
.dropdown-menu-end {
    --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
    right: 0;
    left: auto;
}
@media (min-width:576px) {
    .dropdown-menu-sm-start {
        --bs-position: start;
    }
    .dropdown-menu-sm-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-sm-end {
        --bs-position: end;
    }
    .dropdown-menu-sm-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width:768px) {
    .dropdown-menu-md-start {
        --bs-position: start;
    }
    .dropdown-menu-md-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-md-end {
        --bs-position: end;
    }
    .dropdown-menu-md-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width:992px) {
    .dropdown-menu-lg-start {
        --bs-position: start;
    }
    .dropdown-menu-lg-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-lg-end {
        --bs-position: end;
    }
    .dropdown-menu-lg-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width:1200px) {
    .dropdown-menu-xl-start {
        --bs-position: start;
    }
    .dropdown-menu-xl-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-xl-end {
        --bs-position: end;
    }
    .dropdown-menu-xl-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width:1400px) {
    .dropdown-menu-xxl-start {
        --bs-position: start;
    }
    .dropdown-menu-xxl-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-xxl-end {
        --bs-position: end;
    }
    .dropdown-menu-xxl-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width:1800px) {
    .dropdown-menu-xxxl-start {
        --bs-position: start;
    }
    .dropdown-menu-xxxl-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-xxxl-end {
        --bs-position: end;
    }
    .dropdown-menu-xxxl-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}.dropup .dropdown-menu[data-bs-popper] {
     top: auto;
     bottom: 100%;
     margin-top: 0;
     margin-bottom: var(--bs-dropdown-spacer);
 }
.dropend .dropdown-menu[data-bs-popper] {
    top: 0;
    right: auto;
    left: 100%;
    margin-top: 0;
    margin-left: var(--bs-dropdown-spacer);
}
.dropend .dropdown-toggle::after {
    vertical-align: 0;
}
.dropstart .dropdown-menu[data-bs-popper] {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: var(--bs-dropdown-spacer);
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow, .bs-tooltip-top .tooltip-arrow {
    bottom: 0;
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    top: -1px;
    border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
    border-top-color: var(--bs-tooltip-bg);
}
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow, .bs-tooltip-end .tooltip-arrow {
    left: 0;
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before {
    right: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
    border-right-color: var(--bs-tooltip-bg);
}
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow, .bs-tooltip-bottom .tooltip-arrow {
    top: 0;
}
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
    border-bottom-color: var(--bs-tooltip-bg);
}
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow, .bs-tooltip-start .tooltip-arrow {
    right: 0;
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before {
    left: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
    border-left-color: var(--bs-tooltip-bg);
}
.tooltip-inner {
    max-width: var(--bs-tooltip-max-width);
    padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
    color: var(--bs-tooltip-color);
    text-align: center;
    background-color: var(--bs-tooltip-bg);
    border-radius: var(--bs-tooltip-border-radius);
}
.tooltip {
    --bs-tooltip-zindex: 1080;
    --bs-tooltip-max-width: 200px;
    --bs-tooltip-padding-x: 0.46875rem;
    --bs-tooltip-padding-y: 0.234375rem;
    --bs-tooltip-margin: 0;
    --bs-tooltip-font-size: 0.75rem;
    --bs-tooltip-color: #FFFFFF;
    --bs-tooltip-bg: #20252a;
    --bs-tooltip-border-radius: 4px;
    --bs-tooltip-opacity: 0.95;
    --bs-tooltip-arrow-width: 0.8rem;
    --bs-tooltip-arrow-height: 0.4rem;
    z-index: var(--bs-tooltip-zindex);
    display: block;
    padding: var(--bs-tooltip-arrow-height);
    margin: var(--bs-tooltip-margin);
    font-family: "Open Sans", sans-serif;
    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;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: var(--bs-tooltip-font-size);
    word-wrap: break-word;
    opacity: 0;
}
.tooltip.show {
    opacity: var(--bs-tooltip-opacity);
}
.tooltip .tooltip-arrow {
    display: block;
    width: var(--bs-tooltip-arrow-width);
    height: var(--bs-tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow, .bs-tooltip-top .tooltip-arrow {
    bottom: 0;
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    top: -1px;
    border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
    border-top-color: var(--bs-tooltip-bg);
}
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow, .bs-tooltip-end .tooltip-arrow {
    left: 0;
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before {
    right: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
    border-right-color: var(--bs-tooltip-bg);
}
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow, .bs-tooltip-bottom .tooltip-arrow {
    top: 0;
}
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
    border-bottom-color: var(--bs-tooltip-bg);
}
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow, .bs-tooltip-start .tooltip-arrow {
    right: 0;
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before {
    left: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
    border-left-color: var(--bs-tooltip-bg);
}
.tooltip-inner {
    max-width: var(--bs-tooltip-max-width);
    padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
    color: var(--bs-tooltip-color);
    text-align: left;
    background-color: var(--bs-tooltip-bg);
    border-radius: var(--bs-tooltip-border-radius);
}

.popover {
    --bs-popover-zindex: 1070;
    --bs-popover-max-width: 250px;
    --bs-popover-font-size: 0.75rem;
    --bs-popover-bg: var(--app-component-bg);
    --bs-popover-border-width: 0;
    --bs-popover-border-color: rgba(32,  37,  42,  0.2);
    --bs-popover-border-radius: 6px;
    --bs-popover-inner-border-radius: 6px;
    --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0,  0,  0,  0.15);
    --bs-popover-header-padding-x: 0.9375rem;
    --bs-popover-header-padding-y: 0.65rem;
    --bs-popover-header-font-size: 0.75rem;
    --bs-popover-header-color: var(--bg-1);
    --bs-popover-header-bg: var(--bs-light);
    --bs-popover-body-padding-x: 0.9375rem;
    --bs-popover-body-padding-y: 0.9375rem;
    --bs-popover-body-color: var(--app-component-color);
    --bs-popover-arrow-width: 1rem;
    --bs-popover-arrow-height: 0.5rem;
    --bs-popover-arrow-border: var(--bs-popover-border-color);
    z-index: var(--bs-popover-zindex);
    display: block;
    max-width: var(--bs-popover-max-width);
    font-family: "Open Sans", sans-serif;
    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;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: var(--bs-popover-font-size);
    word-wrap: break-word;
    background-color: var(--bs-popover-bg);
    background-clip: padding-box;
    border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
    border-radius: var(--bs-popover-border-radius);
}
.popover .popover-arrow {
    display: block;
    width: var(--bs-popover-arrow-width);
    height: var(--bs-popover-arrow-height);
}
.popover .popover-arrow::after, .popover .popover-arrow::before {
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 0;
}
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow, .bs-popover-top>.popover-arrow {
    bottom: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
}
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before, .bs-popover-top>.popover-arrow::after, .bs-popover-top>.popover-arrow::before {
    border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0;
}
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before, .bs-popover-top>.popover-arrow::before {
    bottom: 0;
    border-top-color: var(--bs-popover-arrow-border);
}
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-top>.popover-arrow::after {
    bottom: var(--bs-popover-border-width);
    border-top-color: var(--bs-popover-bg);
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow, .bs-popover-end>.popover-arrow {
    left: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
    width: var(--bs-popover-arrow-height);
    height: var(--bs-popover-arrow-width);
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before, .bs-popover-end>.popover-arrow::after, .bs-popover-end>.popover-arrow::before {
    border-width: calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0;
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before, .bs-popover-end>.popover-arrow::before {
    left: 0;
    border-right-color: var(--bs-popover-arrow-border);
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    left: var(--bs-popover-border-width);
    border-right-color: var(--bs-popover-bg);
}
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow, .bs-popover-bottom>.popover-arrow {
    top: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
}
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before, .bs-popover-bottom>.popover-arrow::after, .bs-popover-bottom>.popover-arrow::before {
    border-width: 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height);
}
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before, .bs-popover-bottom>.popover-arrow::before {
    top: 0;
    border-bottom-color: var(--bs-popover-arrow-border);
}
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after, .bs-popover-bottom>.popover-arrow::after {
    top: var(--bs-popover-border-width);
    border-bottom-color: var(--bs-popover-bg);
}
.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .bs-popover-bottom .popover-header::before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: var(--bs-popover-arrow-width);
    margin-left: calc(var(--bs-popover-arrow-width) * -.5);
    content: "";
    border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
}
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow, .bs-popover-start>.popover-arrow {
    right: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
    width: var(--bs-popover-arrow-height);
    height: var(--bs-popover-arrow-width);
}
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, .bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before, .bs-popover-start>.popover-arrow::after, .bs-popover-start>.popover-arrow::before {
    border-width: calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height);
}
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before, .bs-popover-start>.popover-arrow::before {
    right: 0;
    border-left-color: var(--bs-popover-arrow-border);
}
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, .bs-popover-start>.popover-arrow::after {
    right: var(--bs-popover-border-width);
    border-left-color: var(--bs-popover-bg);
}
.popover-header {
    padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
    margin-bottom: 0;
    font-size: var(--bs-popover-header-font-size);
    color: var(--bs-popover-header-color);
    background-color: var(--bs-popover-header-bg);
    border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
    border-top-left-radius: var(--bs-popover-inner-border-radius);
    border-top-right-radius: var(--bs-popover-inner-border-radius);
}
.popover-header:empty {
    display: none;
}
.popover-body {
    padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
    color: var(--bs-popover-body-color);
}

/*.apexcharts-tooltip-title {
    display:none;
}*/

/* content */


.contents-ul li {
    margin-left: var(--spacing-6);
    position: relative;
    margin-top: var(--spacing-2);
}

.contents-ul li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: var(--secondary-50);
    position: absolute;
    top: 8px;
    left: -14px;
}
.contents-sec-ul {
    margin-top: var(--spacing-3);
}
.contents-sec-ul li::before {
    border-radius: 50%;
    background-color: var(--secondary-30);
}
.contents-thr-ul li::before{
    height: 1px;
    width: 7px;
    background-color: var(--gray-scale-50);
    top: 14px;
}

.contents-ul > li {
    margin-top: var(--spacing-3);
    font: var(--body-md);
}

.footnote {
    display: inline-block;
    font-size: 0.73em;
    transform: translateY(-7px);
}

@media screen and (max-width: 1200px) {
    .indx-sply-wrap {
        flex-wrap: wrap;
    }
    .indx-sply-wrap .col {
        width:calc((100% / 2) - 16px);
    }
    .indx-sply-wrap #chartSpdm {
        height: 100%!important;
        width: 110%!important;
        transform:translate(-20px, 10px)!important;
    }
}

@media (max-width:768px) {
    .indx-sply-wrap #chartSpdm {
        height: 120%!important;
        width: 140%!important;
        transform:translate(-50px, -30px)!important;
    }
}
@media screen and (max-width: 568px) {
    .indx-sply-wrap .col {
        width:100%;
    }
    .indx-sply-wrap #chartSpdm {
        height: 110%!important;
        width: 120%!important;
        transform:translate(-30px, -10px)!important;
    }
}

body {
    padding-top:0!important;
}
header {
    position:relative!important;
}

#printArea table {
    width: 100%;
    max-width:100%;
    table-layout: fixed;
    border-spacing: unset;
}
#printArea table td {
    border-style: solid;
}

/*.main-slider:has(*:focus-visible) {*/
/*    outline: 3px dashed var(--gray-scale-100);*/
/*    outline-offset: 2px;*/
/*}*/

#footer *:focus-visible {
    outline: 3px dashed var(--gray-scale-0);
}
#footer .family-site-option a:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}

.blind {
    position:absolute;
    width:1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
}

a.label-line:hover {
    color: var(--secondary-60);
    background-color: var(--gray-scale-10);
    border: 2px solid var(--secondary-60);
}
a.label-line:focus-visible{
     outline: 3px dashed var(--gray-scale-100);
     outline-offset: 1px;
 }

.note-editor.note-frame .note-toolbar .note-btn-group .note-btn:focus-visible {
    outline:3px dashed var(--gray-scale-100);
}

.btn-min-exel {
    font-size:0.75em;
    background-color:rgba(255,255,255,.75);
    border:1px solid var(--gray-scale-30);
    bottom:0;
    right:0;
    padding: var(--spacing-2) var(--spacing-4);
    transition:all .2s ease;
    z-index:2;
}
.btn-min-exel:hover {
    background-color:rgba(220,220,220,.75);
}

.dl-contents dl {
    width:100%;
    max-width:380px;
    border: 1px solid var(--stroke-2);
    margin:0 auto;
}
.dl-contents dt, .dl-contents dd {
    width:100%;
    text-align:center;
    margin:0;
    padding:0;
}
.dl-contents dt {
    font: var(--body-md-b);
    padding:var(--spacing-4);
    background-color:var(--information-5);
    border-bottom: 4px double var(--stroke-2);
    border-top: 3px solid var(--stroke-2) !important;

}
.dl-contents dd {
    font: var(--detail-md);
    padding:var(--spacing-4);
}

.nav > li {
    position:relative;
}

.depth2-menu {
    position:absolute;
    background:var(--gray-scale-0);
    width: 100%;
    height:430px;
    border-top:1px solid var(--gray-scale-20);
    border-left:1px solid var(--gray-scale-20);
}
.active .depth2-menu {
    background-color: var(--information-5);
}
.depth2-menu  > li > a {
    word-break: break-word;
    display: flex;
    gap: var(--spacing-4);
    align-items: center;
    position: relative;
    font:var(--label-sm);
    color: var(--gray-scale-90);
    padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-4);
    border-radius: 0 8px 8px 0;
}
.depth2-menu > li {
}
.depth2-menu  > li:first-child {
    padding-top:var(--spacing-3);
}
.depth2-menu  > li:last-child{
    padding-bottom:var(--spacing-4);
}
.active .depth2-menu a:hover {
    background-color: var(--information-10);
}

.depth3-menu {
    position: static !important;
    inset: unset !important;
    margin: auto !important;
    transform: none !important;
}

.nav > li:nth-child(2) .depth2-menu::before {
    content:'';
    display:block;
    position: absolute;
    padding-left:var(--spacing-inner);
    left: var(--spacing-inner-r);
    box-sizing:initial;
    border-bottom-left-radius: 16px;
    height:100%;
    background:var(--gray-scale-0);
    z-index: -1;
}
.nav > li:nth-last-child(2) .depth2-menu::before {
    content:'';
    display:block;
    position: absolute;
    padding-right:var(--spacing-inner);
    right: var(--spacing-inner-r);
    box-sizing:initial;
    border-bottom-right-radius: 16px;
    height:100%;
    background:var(--gray-scale-0);
    z-index: -1;
}

.depth3-menu {
    padding: var(--spacing-3);
    background-color: var(--bg-2);
    border-radius: 0 0 8px 0;
}
.depth3-menu a {
    display: block;
    color: var(--gray-scale-100);
    padding: var(--spacing-2) var(--spacing-2);
    border-radius: 8px;
    font: var(--label-sm);
}
.depth2-menu i {
    font-size: 12px;
    color: var(--gray-scale-50);
}
.depth2-menu a[aria-expanded = "true"] i {
   transform:rotate(180deg);
}

.depth2-menu {
    display:none;
}

.open-submenu .depth2-menu {
    display:block;
}

.nav > li.active > a > i {
   transform:rotate(180deg);
}

.depth2-menu li a[aria-expanded = "true"] .blind::after {
    content:"내용 펼침";
}

.depth2-menu li a[aria-expanded = "false"] .blind::after {
    content:"내용 숨김";
}

@media screen and (max-width: 1200px) {
    .nav {display:none;}
    .open-submenu .nav {
        display:block;
    }
    .nav > li:nth-child(2) .depth2-menu::before,
    .nav > li:nth-last-child(2) .depth2-menu::before {
        display:none;
    }
    .nav .site-li {
        display:none;
    }
    .depth2-menu {
        position:relative;
        height:auto;
    }
    .open-submenu .depth2-menu {
        display:none;
    }
    .open-submenu li.active .depth2-menu {
        display:block;
    }
    .nav > li:not(:last-child) > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font: var(--title-lg);
        color: var(--gray-scale-100);
        padding: var(--spacing-4) var(--spacing-3);
        border-top: 1px solid var(--stroke-2);
        text-align:left;
        border-radius: 0;
    }
    .nav > li.active {
         background: var(--gray-scale-0);
     }
     .open-submenu .active .depth2-menu {
         background: var(--bg-1);
    }
    .depth3-menu {
         background: var(--bg-0);
    }

    .nav > li.mobile-nav-control > a{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font: var(--label-md);
        color: var(--gray-scale-60);
        padding: var(--spacing-4) var(--spacing-3) var(--spacing-3);
        border-top: 0;
        white-space:nowrap;
    }
    .pc-hide {
        display:block;
    }

    ul.popupContainer {
        top:79px!important;
    }
}

@media screen and (max-width: 390px) {
    ul.popupContainer {
        top:55px!important;
    }
 }

.ntn-mnrl-img-div {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.ntn-mnrl-img-div > img {
    max-width: 100%;
}