/**************************************************************/
/*								                              */
/*  Design ezinc     			                              */
/*  Date : 2024-09-24	                                      */
/*      				         			                  */
/**************************************************************/

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');



/* ============================ [ reset ] ============================ */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', '맑은 고딕', 'malgun gothic', 'Apple SD Gothic Neo', 'Apple SD 산돌고딕 Neo', Helvetica, 'Microsoft NeoGothic', 'Droid sans', sans-serif;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
    outline: 0;
	font: inherit;
	vertical-align: baseline;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    background-color: var(--form);
    color: var(--gray-900);
    font-size: var(--fs-13);
    box-sizing: border-box;
    font-family: 'Noto Sans KR', '맑은 고딕', 'malgun gothic', 'Apple SD Gothic Neo', 'Apple SD 산돌고딕 Neo', Helvetica, 'Microsoft NeoGothic', 'Droid sans', sans-serif; 
}

html {
    height: 100%;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    min-width: 438px;
    min-height: 100%;
    line-height: 1.3em;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

body::after {
    display: block;
    content: "";
    clear: both; 
}

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

img {
    border: 0;
    vertical-align: middle;
    margin: 0;
}

pre {
    width: 100%;
    display: block;
    font-family: var(--ff-noto);
    line-height: 135%;
    white-space: pre-wrap;
    word-break: break-all;
    overflow: auto;    
}

h1, h2, h3, h4, h5, h6, span, p, div, a {
    word-break: keep-all;
}

details, main, summary {
	display: block;
}

details summary::-webkit-details-marker {
    display: none;
}



/* ============================ [ button ] ============================ */
button,
a {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: var(--ff-noto);
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    overflow: visible;
}

button:disabled,
a:disabled {
    pointer-events: none;
}

button {
    border-radius: var(--radius-md);
    -webkit-border-radius: var(--radius-md);
    font-size: var(--fs-13);
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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


/********** button style **********/
/* primary button */
.btn_primary {
    background: var(--primary);
    color: var(--primaryOn);
    transition: all 0.2s;
}

.btn_primary:hover,
.btn_primary:active,
.btn_primary:focus {
    background: var(--primaryHard);
    color: var(--primaryHardOn);
    cursor: pointer;
}

.btn_primary:disabled,
.btn_primary:disabled:hover,
.btn_primary:disabled:active,
.btn_primary:disabled:focus {
    background: var(--primaryDisabled);
    color: var(--primaryDisabledOn);
    pointer-events: none;
}

/* primarySoft button */
.btn_primarySoft {
    background: var(--primarySoft);
    color: var(--primaryOn);
    transition: all 0.2s;
}

.btn_primarySoft:hover,
.btn_primarySoft:active,
.btn_primarySoft:focus {
    background: var(--primaryHard);
    color: var(--primaryHardOn);
    cursor: pointer;
}

.btn_primarySoft:disabled,
.btn_primarySoft:disabled:hover,
.btn_primarySoft:disabled:active,
.btn_primarySoft:disabled:focus {
    background: var(--primaryDisabled);
    color: var(--primaryDisabledOn);
    pointer-events: none;
}

/* primarySoft button */
.btn_primaryHard {
    background: var(--primaryHard);
    color: var(--primaryHardOn);
    transition: all 0.2s;
}

.btn_primaryHard:hover,
.btn_primaryHard:active,
.btn_primaryHard:focus {
    background: var(--gray-800);
    cursor: pointer;
}

.btn_primaryHard:disabled,
.btn_primaryHard:disabled:hover,
.btn_primaryHard:disabled:active,
.btn_primaryHard:disabled:focus {
    background: var(--primaryDisabled);
    color: var(--primaryDisabledOn);
    pointer-events: none;
}

/* primary light button */
.btn_primaryLight {
    background: var(--primaryLight);
    color: var(--primary);
    transition: all 0.2s;
}

.btn_primaryLight:hover,
.btn_primaryLight:active,
.btn_primaryLight:focus {
    background: var(--primaryHard);
    color: var(--primaryHardOn);
    cursor: pointer;
}

.btn_primaryLight:disabled,
.btn_primaryLight:disabled:hover,
.btn_primaryLight:disabled:active,
.btn_primaryLight:disabled:focus {
    background: var(--primaryDisabled);
    color: var(--primaryDisabledOn);
    pointer-events: none;
}

/* primary line button */
.btn_primaryLine {
    border: 1px solid var(--primary);
    background: var(--white);
    color: var(--primary);
    transition: all 0.2s;
}

.btn_primaryLine:hover,
.btn_primaryLine:active,
.btn_primaryLine:focus {
    border: 1px solid var(--primaryHard);
    background: var(--primaryHard);
    color: var(--primaryHardOn);
    cursor: pointer;
}

.btn_primaryLine:disabled,
.btn_primaryLine:disabled:hover,
.btn_primaryLine:disabled:active,
.btn_primaryLine:disabled:focus  {
    border: 1px solid var(--primaryDisabled);
    color: var(--primaryDisabled);
    pointer-events: none;
}

/* sub button */
.btn_sub {
    background: var(--secondary);
    color: var(--secondaryOn);
    transition: all 0.2s;
}

.btn_sub:hover,
.btn_sub:active,
.btn_sub:focus {
    background: var(--secondaryHard);
    color: var(--secondaryHardOn);
    cursor: pointer;
}

.btn_sub:disabled,
.btn_sub:disabled:hover,
.btn_sub:disabled:active,
.btn_sub:disabled:focus {
    background: var(--secondaryDisabled);
    color: var(--secondaryDisabledOn);
    pointer-events: none;
}

/* sub line button */
.btn_subLine {
    border: 1px solid var(--secondary);
    background: var(--white);
    color: var(--secondary);
    transition: all 0.2s;
}

.btn_subLine:hover,
.btn_subLine:active,
.btn_subLine:focus {
    border: 1px solid var(--secondaryHard);
    background: var(--secondaryHard);
    color: var(--secondaryHardOn);
    cursor: pointer;
}

.btn_subLine:disabled,
.btn_subLine:disabled:hover,
.btn_subLine:disabled:active,
.btn_subLine:disabled:focus {
    border: 1px solid var(--secondaryDisabled);
    color: var(--secondaryDisabled);
    pointer-events: none;
}

/* line button */
.btn_line {
    border: 1px solid var(--gray-500);
    background: var(--white);
    color: var(--gray-700);
    transition: all 0.2s;
}

.btn_line:hover,
.btn_line:active,
.btn_line:focus {
    border: 1px solid var(--gray-900);
    background: var(--gray-900);
    color: var(--white);
    cursor: pointer;
}

.btn_line:disabled,
.btn_line:disabled:hover,
.btn_line:disabled:active,
.btn_line:disabled:focus {
    border: 1px solid var(--primaryDisabled);
    color: var(--primaryDisabledOn);
    pointer-events: none;
}

/* basic button */
.btn_basic {
    background: var(--gray-600);
    color: var(--white);
    transition: all 0.2s;
}

.btn_basic:hover,
.btn_basic:active,
.btn_basic:focus {
    background: var(--gray-800);
    color: var(--white);
    cursor: pointer;
}

.btn_basic:disabled,
.btn_basic:disabled:hover,
.btn_basic:disabled:active,
.btn_basic:disabled:focus {
    background: var(--gray-300);
    color: var(--white);
    pointer-events: none;
}

/* basic line button */
.btn_basicLine {
    border: 1px solid var(--gray-300);
    background: var(--white);
    color: var(--gray-500);
    transition: all 0.2s;
}

.btn_basicLine:hover,
.btn_basicLine:active,
.btn_basicLine:focus {
    border: 1px solid var(--gray-400);
    background: var(--white);
    color: var(--gray-800);
    cursor: pointer;
}

.btn_basicLine:disabled,
.btn_basicLine:disabled:hover,
.btn_basicLine:disabled:active,
.btn_basicLine:disabled:focus {
    border: 1px solid var(--gray-300);
    background: var(--white);
    color: var(--gray-300);
    pointer-events: none;
}

/* text button */
.btn_text {
    border: 0;
    background: transparent;
    color: var(--gray-600);
}

/* table detail button */
.btn_detail {
    background: rgba(35, 106, 238, 0.05);
    border: 1px solid rgba(35, 106, 238, 0.3);
    color: var(--primary);
    font-size: var(--fs-12);
    border-radius: var(--radius-sm);
    align-items: center;
    gap: var(--spacing-4);
}
 
.btn_detail::after {
    content: '';
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 2px;
    background: url('../images/ico_detail.svg') no-repeat center center;
    transition: all 0.2s;
}

.btn_detail:hover {
    border: 1px solid var(--primary);
}


/* ============================ [ input ] ============================ */
input, select, textarea {
    border: 1px solid var(--ip-normal-line);
    background: var(--ip-normal-bg);
    color: var(--ip-normal-color);
    border-radius: var(--radius-md);
    font-size: var(--fs-14);
    font-family: var(--ff-noto);
    font-weight: 500;
    box-sizing: border-box;
    cursor: text;
}

input, select {
    height: 4.8rem;
}

input:focus, 
textarea:focus {
    background: var(--ip-focus-bg);
    outline-color: var(--ip-focus-line);
} 

input:read-only, 
textarea:read-only,
input:read-only:focus, 
textarea:read-only:focus {
    background: var(--ip-readonly-bg);
    border: 1px solid var(--ip-readonly-line);
    color: var(--ip-readonly-color);
    outline: none;
}

input:disabled, 
select:disabled, 
textarea:disabled {
    background: var(--ip-disabled-bg);
    border: 1px solid var(--ip-disabled-line);
    color: var(--ip-disabled-color);
    pointer-events: none;
}

input::placeholder,
input::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder {
    color: var(--ip-placeholder) !important;
    font-weight: 400;
    opacity: 1;
}

input {
    padding: 0 var(--spacing-16);
    vertical-align: middle;
    min-width: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px var(--ip-normal-bg) inset !important;
    -webkit-text-fill-color: var(--gray-900) !important;
}

/* input type number 스피너 제거 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}



/* ============================ [ textarea ] ============================ */
textarea {
    padding: var(--spacing-16);
    vertical-align: top;
    resize: none;
}



/* ============================ [ select ] ============================ */
select {
    min-width: 0;
    background: url("../images/ico_dropdown.svg") no-repeat right center;
    background-color: var(--ip-normal-bg);
    padding: 0 var(--spacing-48) 0 var(--spacing-16);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

select:focus {
    background: url("../images/ico_dropdown.svg") no-repeat right center;
    background-color: var(--ip-focus-bg);
    outline-color: var(--ip-focus-line);
}

select:disabled {
    background: url("../images/ico_dropdown.svg") no-repeat right center;
    background-color: var(--ip-disabled-bg);
    pointer-events: none;
}

select:required:invalid {
    background: url("../images/ico_dropdown.svg") no-repeat right center;
    background-color: var(--ip-normal-bg);
    color: var(--gray-400);
    font-weight: 400;
}

select > option {
    background-color: var(--white);
    color: var(--gray-900);
    padding: var(--spacing-16) var(--spacing-24);
    cursor: pointer;
}

select > option[value=''] {
    display: none;
}

.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
}



/* ============================ [ table ] ============================ */
table {
    border-top: 2px solid var(--gray-600);
    background: transparent;
    width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 0;
}

table tr {
    border: 0;
    border-collapse: collapse;
}

th,
td {
    border-bottom: 1px solid var(--gray-100);
    background: var(--form);
    color: var(--gray-700);
    font-family: var(--ff-noto);
    font-size: var(--fs-12);
    line-height: 1.25;
    text-align: center;
    border-spacing: 0; 
    vertical-align: middle;
    border-collapse: collapse;
    word-break: break-all;    
    padding: var(--spacing-12) var(--spacing-8);
}

th {
    color: var(--gray-900);
    border-bottom: 1px solid var(--gray-200);
    font-size: var(--fs-13);
    font-weight: 700;    
}

td span {
    width: 100%;
    color: var(--gray-700);
    font-size: var(--fs-12);
    text-align: center;
    display: inline-block;
}

tr:hover td {
    background: var(--gray-50);
}

/* 말줄임표 */
td.ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}



/* ============================ [ font style ] ============================ */
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 700;
    letter-spacing: -1px;
    overflow-wrap: break-word;
}

/* font-size */
.fs-11, .fs11 {
    font-size: var(--fs-11);
}

.fs-12, .fs12 {
    font-size: var(--fs-12);
}

.fs-13, .fs13 {
    font-size: var(--fs-13);
}

.fs-14, .fs14 {
    font-size: var(--fs-14);
}

.fs-15, .fs15 {
    font-size: var(--fs-15);
}

.fs-16, .fs16 {
    font-size: var(--fs-16);
}

.fs-18, .fs18 {
    font-size: var(--fs-18);
}

.fs-20, .fs20 {
    font-size: var(--fs-20);
}

.fs-24, .fs24 {
    font-size: var(--fs-24);
}

.fs-28, .fs28 {
    font-size: var(--fs-28);
}

.fs-32, .fs32 {
    font-size: var(--fs-32);
}

/* font-weight */
.bold {
    font-weight: bold;
}

.b-300, .b300 {
    font-weight: 300 !important;
}

.b-400, .b400 {
    font-weight: 400 !important;
}

.b-500, .b500 {
    font-weight: 500 !important;
}

.b-600, .b600 {
    font-weight: 600 !important;
}

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

.b-800, .b800 {
    font-weight: 800 !important;
 }

.b-900, .b900 {
    font-weight: 900 !important;
}


/* text-align */
.ta-left {
    text-align: left !important;
}

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

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


/* vertical-align */
.va-top {
    vertical-align: top;
}

.va-md {
    vertical-align: middle;
}

.va-bt {
    vertical-align: bottom;
}

.va-bl {
    vertical-align: baseline;
}

.va-txt-top {
    vertical-align: text-top;
}

.va-txt-bottom {
    vertical-align: text-bottom;
}


/* float */
.flt-l {
    float: left !important;
}

.flt-r {
    float: right !important;
}


/* text-decoration */
.td-ul,
.td-ul:hover {
    text-decoration: underline;
}

.td-lt,
.td-lt:hover {
    text-decoration: line-through;
}

.td-none,
.td-none:hover {
    text-decoration: none;
}


/* cursor */
.cs-pt {
    cursor: pointer;
}

.cs-no {
    pointer-events: none;
}

.cs-txt {
    cursor: text;
}


/* word break */
.wb-ba {
    word-break: break-all;
}

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

.wb-nm {
    word-break: normal;
}


/* ============================ [ layout ] ============================ */
.reset {
    display: initial !important;
}

.block {
    display: block !important;
}

.inline {
    display: inline !important;
}

.in-block, .in_block {
    display: inline-block !important;
}

.fl {
    display: flex !important;
}

.fl-col, .fl_col {
    display: flex !important;
    flex-direction: column !important;
}

.in-fl .in_fl {
    display: inline-flex !important;
}

.in-fl-col .in_fl_col {
    display: inline-flex !important;
    flex-direction: column !important;
}

.ai-ct, .ai_ct {
    align-items: center !important;
}

.ai-fs, .ai_fs {
    align-items: flex-start !important;
}

.ai-fe, .ai_fe {
    align-items: flex-end !important;
}

.jc-ct, .jc_ct {
    justify-content: center !important;
}

.jc-sb, .jc_sb {
    justify-content: space-between !important;
}

.jc-fs, .jc_fs {
    justify-content: flex-start !important;
}

.jc-fe, .jc_fe {
    justify-content: flex-end !important;
}

.fl-ct, .fl_ct {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fl-col-ct, .fl_col_ct {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.fl-wrap, .fl_wrap {
    flex-wrap: wrap !important;
}

/* gap */
.gap-0 {
    gap: 0px !important;
}

.gap-2 {
    gap: 2px !important;
}

.gap-4 {
    gap: 4px !important;
}

.gap-6 {
    gap: 6px !important;
}
 
.gap-8 {
    gap: 8px !important;
}
 
.gap-12 {
    gap: 12px !important;
}
 
.gap-16 {
    gap: 16px !important;
}
 
.gap-20 {
    gap: 20px !important;
}
 
.gap-24 {
    gap: 24px !important;
}
 
.gap-32 {
    gap: 32px !important;
}
 
.gap-36 {
    gap: 36px !important;
}
 
.gap-40 {
    gap: 40px !important;
}

.gap-44 {
    gap: 44px !important;
}
 
.gap-48 {
    gap: 48px !important;
} 



/* ============================ [ width ] ============================ */ 
.w-100 {
    width: 100% !important;
}

.w-50 {
    width: 50% !important;
}

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

.h-fit {
    height: fit-content !important;
}



/* ============================ [ spacing ] ============================ */
/* margin */
.mg-ct {
    margin: 0 auto !important;
}

.mg-0 {
    margin: 0 !important;
}

.mg-2 {
    margin: 2px !important;
}

.mg-4 {
    margin: 4px !important;
}

.mg-6 {
    margin: 6px !important;
}

.mg-8 {
    margin: 8px !important;
}

.mg-10 {
    margin: 10px !important;
}

.mg-12 {
    margin: 12px !important;
}

.mg-16 {
    margin: 16px !important;
}

.mg-20 {
    margin: 20px !important;
}

.mg-24 {
    margin: 24px !important;
}

.mg-28 {
    margin: 28px !important;
}

.mg-32 {
    margin: 32px !important;
}

.mg-36 {
    margin: 36px !important;
}

.mg-40 {
   margin: 40px !important;
}

.mg-44 {
    margin: 44px !important;
 }

.mg-48 {
    margin: 48px !important;
}

/* margin-top */
.mt-0, .mt_0 {
    margin-top: 0 !important;
}

.mt-2, .mt_2 {
    margin-top: 2px !important;
}

.mt-4, .mt_4 {
    margin-top: 4px !important;
}

.mt-6, .mt_6 {
    margin-top: 6px !important;
}

.mt-8, .mt_8 {
    margin-top: 8px!important;
}

.mt-10, .mt_10 {
    margin-top: 10px !important;
}

.mt-12, .mt_12 {
    margin-top: 12px !important;
}

.mt-16, .mt_16 {
    margin-top: 16px !important;
}

.mt-20, .mt_20 {
    margin-top: 20px !important;
}

.mt-24, .mt_24 {
    margin-top: 24px !important;
}

.mt-28, .mt_28 {
    margin-top: 28px !important;
}

.mt-32, .mt_32 {
    margin-top: 32px !important;
}

.mt-36, .mt_36 {
    margin-top: 36px !important;
}

.mt-40, .mt_40 {
    margin-top: 40px !important;
}

.mt-44, .mt_44 {
    margin-top: 44px !important;
}

.mt-48, .mt_48 {
    margin-top: 48px !important;
}

/* margin-bottom */
.mb-0, .mb_0 {
    margin-bottom: 0 !important;
}

.mb-2, .mb_2 {
    margin-bottom: 2px !important;
}

.mb-4, .mb_4 {
    margin-bottom: 4px !important;
}

.mb-6, .mb_6 {
    margin-bottom: 6px !important;
}

.mb-8, .mb_8 {
    margin-bottom: 8px !important;
}

.mb-10, .mb_10 {
    margin-bottom: 10px !important;
}

.mb-12, .mb_12 {
    margin-bottom: 12px !important;
}

.mb-16, .mb_16 {
    margin-bottom: 16px !important;
}

.mb-20, .mb_20 {
    margin-bottom: 20px !important;
}

.mb-24, .mb_24 {
    margin-bottom: 24px !important;
}

.mb-28, .mb_28 {
    margin-bottom: 28px !important;
}

.mb-32, .mb_32 {
    margin-bottom: 32px !important;
}

.mb-36, .mb_36 {
    margin-bottom: 36px !important;
}

.mb-40, .mb_40 {
    margin-bottom: 40px !important;
}

.mb-44, .mb_44 {
    margin-bottom: 44px !important;
}

.mb-48, .mb_48 {
    margin-bottom: 48px !important;
}

/* margin-left */
.ml-0, .ml_0 {
    margin-left: 0 !important;
}

.ml-2, .ml_2 {
    margin-left: 2px !important;
}

.ml-4, .ml_4 {
    margin-left: 4px !important;
}

.ml-6, .ml_6 {
    margin-left: 6px !important;
}

.ml-8, .ml_8 {
    margin-left: 8px !important;
}

.ml-10, .ml_10 {
    margin-left: 10px !important;
}

.ml-12, .ml_12 {
    margin-left: 12px !important;
}

.ml-16, .ml_16 {
    margin-left: 16px !important;
}

.ml-20, .ml_20 {
    margin-left: 20px !important;
}

.ml-24, .ml_24 {
    margin-left: 24px !important;
}

.ml-28, .ml_28 {
    margin-left: 28px !important;
}

.ml-32, .ml_32 {
    margin-left: 32px !important;
}

.ml-36, .ml_36 {
    margin-left: 36px !important;
}

.ml-40, .ml_40 {
    margin-left: 40px !important;
}

.ml-44, .ml_44 {
    margin-left: 44px !important;
}

.ml-48, .ml_48 {
    margin-left: 48px !important;
}

/* margin-right */
.mr-0, .mr_0 {
    margin-right: 0 !important;
}

.mr-2, .mr_2 {
    margin-right: 2px !important;
}

.mr-4, .mr_4 {
    margin-right: 4px !important;
}

.mr-6, .mr_6 {
    margin-right: 6px !important;
}

.mr-8, .mr_8 {
    margin-right: 8px !important;
}

.mr-10, .mr_10 {
    margin-right: 10px !important;
}

.mr-12, .mr_12 {
    margin-right: 12px !important;
}

.mr-16, .mr_16 {
    margin-right: 16px !important;
}

.mr-20, .mr_20 {
    margin-right: 20px !important;
}

.mr-24, .mr_24 {
    margin-right: 24px !important;
}

.mr-28, .mr_28 {
    margin-right: 28px !important;
}

.mr-32, .mr_32 {
    margin-right: 32px !important;
}

.mr-36, .mr_36 {
    margin-right: 36px !important;
}

.mr-40, .mr_40 {
    margin-right: 40px !important;
}

.mr-44, .mr_44 {
    margin-right: 44px !important;
}

.mr-48, .mr_48 {
    margin-right: 48px !important;
}

/* padding */
.pd-0 {
    padding: 0 !important;
}

.pd-2 {
    padding: 2px !important;
}

.pd-4 {
    padding: 4px !important;
}

.pd-6 {
    padding: 6px !important;
}

.pd-8 {
    padding: 8px !important;
}

.pd-10 {
    padding: 10px !important;
}

.pd-12 {
    padding: 12px !important;
}

.pd-16 {
    padding: 16px !important;
}

.pd-20 {
    padding: 20px !important;
}

.pd-24 {
    padding: 24px !important;
}

.pd-28 {
    padding: 28px !important;
}

.pd-32 {
    padding: 32px !important;
}

.pd-36 {
    padding: 36px !important;
}

.pd-40 {
    padding: 40px !important;
}

.pd-44 {
    padding: 44px !important;
}

.pd-48 {
    padding: 48px !important;
}

/* padding-top */
.pt-0, .pt_0 {
    padding-top: 0 !important;
}

.pt-2, .pt_2 {
    padding-top: 2px !important;
}

.pt-4, .pt_4 {
    padding-top: 4px !important;
}

.pt-6, .pt_6 {
    padding-top: 6px !important;
}

.pt-8, .pt_8 {
    padding-top: 8px !important;
}

.pt-10, .pt_10 {
    padding-top: 10px !important;
}

.pt-12, .pt_12 {
    padding-top: 12px !important;
}

.pt-16, .pt_16 {
    padding-top: 16px !important;
}

.pt-20, .pt_20 {
    padding-top: 20px !important;
}

.pt-24, .pt_24 {
    padding-top: 24px !important;
}

.pt-28, .pt_28 {
    padding-top: 28px !important;
}

.pt-32, .pt_32 {
    padding-top: 32px !important;
}

.pt-36, .pt_36 {
    padding-top: 36px !important;
}

.pt-40, .pt_40 {
    padding-top: 40px !important;
}

.pt-44, .pt_44 {
    padding-top: 44px !important;
}

.pt-48, .pt_48 {
    padding-top: 48px !important;
}

/* padding-bottom */
.pb-0, .pb_0 {
    padding-bottom: 0 !important;
}

.pb-2, .pb_2 {
    padding-bottom: 2px !important;
}

.pb-4, .pb_4 {
    padding-bottom: 4px !important;
}

.pb-6, .pb_6 {
    padding-bottom: 6px !important;
}

.pb-8, .pb_8 {
    padding-bottom: 8px !important;
}

.pb-10, .pb_10 {
    padding-bottom: 10px !important;
}

.pb-12, .pb_12 {
    padding-bottom: 12px !important;
}

.pb-16, .pb_16 {
    padding-bottom: 16px !important;
}

.pb-20, .pb_20 {
    padding-bottom: 20px !important;
}

.pb-24, .pb_24 {
    padding-bottom: 24px !important;
}

.pb-28, .pb_28 {
    padding-bottom: 28px !important;
}

.pb-32, .pb_32 {
    padding-bottom: 32px !important;
}

.pb-36, .pb_36 {
    padding-bottom: 36px !important;
}

.pb-40, .pb_40 {
    padding-bottom: 40px !important;
}

.pb-44, .pb_44 {
    padding-bottom: 44px !important;
}

.pb-48, .pb_48 {
    padding-bottom: 48px !important;
}

/* padding-left */
.pl-0, .pl_0 {
    padding-left: 0 !important;
}

.pl-2, .pl_2 {
    padding-left: 2px !important;
}

.pl-4, .pl_4 {
    padding-left: 4px !important;
}

.pl-6, .pl_6 {
    padding-left: 6px !important;
}

.pl-8, .pl_8 {
    padding-left: 8px !important;
}

.pl-10, .pl_10 {
    padding-left: 10px !important;
}

.pl-12, .pl_12 {
    padding-left: 12px !important;
}

.pl-16, .pl_16 {
    padding-left: 16px !important;
}

.pl-20, .pl_20 {
    padding-left: 20px !important;
}

.pl-24, .pl_24 {
    padding-left: 24px !important;
}

.pl-28, .pl_28 {
    padding-left: 28px !important;
}

.pl-32, .pl_32 {
    padding-left: 32px !important;
}

.pl-36, .pl_36 {
    padding-left: 36px !important;
}

.pl-40, .pl_40 {
    padding-left: 40px !important;
}

.pl-44, .pl_44 {
    padding-left: 44px !important;
}

.pl-48, .pl_48 {
    padding-left: 48px !important;
}

/* padding-right */
.pr-0, .pr_0 {
    padding-right: 0 !important;
}

.pr-2, .pr_2 {
    padding-right: 2px !important;
}

.pr-4, .pr_4 {
    padding-right: 4px !important;
}

.pr-6, .pr_6 {
    padding-right: 6px !important;
}

.pr-8, .pr_8 {
    padding-right: 8px !important;
}

.pr-10, .pr_10 {
    padding-right: 10px !important;
}

.pr-12, .pr_12 {
    padding-right: 12px !important;
}

.pr-16, .pr_16 {
    padding-right: 16px !important;
}

.pr-20, .pr_20 {
    padding-right: 20px !important;
}

.pr-24, .pr_24 {
    padding-right: 24px !important;
}

.pr-28, .pr_28 {
    padding-right: 28px !important;
}

.pr-32, .pr_32 {
    padding-right: 32px !important;
}

.pr-36, .pr_36 {
    padding-right: 36px !important;
}

.pr-40, .pr_40 {
    padding-right: 40px !important;
}

.pr-44, .pr_44 {
    padding-right: 44px !important;
}

.pr-48, .pr_48 {
    padding-right: 48px !important;
}



/* ============================ [ border-radius ] ============================ */
.rd-0, .rd_none {
    border-radius: 0;
}

.rd-2, .rd_xs {
    border-radius: var(--radius-xs);
}

.rd-4, .rd_sm {
    border-radius: var(--radius-sm);
}

.rd-8, .rd_md {
    border-radius: var(--radius-md);
}

.rd-10, .rd_lg {
    border-radius: var(--radius-lg);
}

.rd-16, .rd_xl {
    border-radius: var(--radius-xl);
}

.rd-20, .rd_xxl {
    border-radius: var(--radius-xxl);
}

.rd-24, .rd_xxxl {
    border-radius: var(--radius-xxxl);
}

.rd-32, .rd_xxxxl {
    border-radius: var(--radius-xxxxl);
}

.rd-50 {
    border-radius: var(--radius-big);
}

.rd-round {
    border-radius: var(--radius-round);
}



/* ============================ [ text color ] ============================ */
.cl-white, .cl_white {
    color: var(--white) !important;
}

.cl-black, .cl_black {
    color: var(--black) !important;
}

.cl-gray, .cl_gray {
    color: var(--gray-600) !important;
}

.cl-gray-light {
    color: var(--gray-400) !important;
}

.cl-blue, .cl_blue {
    color: var(--blue-600) !important;
}

.cl-blue-light {
    color: var(--blue-400) !important;
}

.cl-red, .cl_red {
    color: var(--red-600) !important;
}

.cl-red-light {
    color: var(--red-400) !important;
}

.cl-green {
    color: var(--green-600) !important;
}

.cl-green-light {
    color: var(--green-400) !important;
}

.cl-purple {
    color: var(--purple-600) !important;
}

.cl-purple-light {
    color: var(--purple-400) !important;
}

.cl-pink {
    color: var(--purple-600) !important;
}

.cl-pink-light {
    color: var(--purple-300) !important;
}

.cl-yellow {
    color: var(--yellow-500) !important;
}

.cl-yellow-light {
    color: var(--yellow-300) !important;
}

.cl-pr, .cl_pr {
    color: var(--primary) !important;
}

.cl-pr-emp, .cl_pr_emp {
    color: var(--primary) !important;
    font-weight: 700;
}

.cl-sub, .cl_sub {
    color: var(--secondary) !important;
}

.cl-sub-emp {
    color: var(--secondary) !important;
    font-weight: 700;
}



/* ============================ [ bg color ] ============================ */
.bg-white {
    background: var(--white) !important;
}

.bg-white-softL {
    border: 1px solid var(--gray-200);
    background: var(--white) !important;
}

.bg-white-lightL {
    border: 1px solid var(--gray-300);
    background: var(--white) !important;
}

.bg-white-strongL {
    border: 1px solid var(--gray-600);
    background: var(--white) !important;
}

.bg-black {
    background: var(--black) !important;
}

.bg-gray {
    background: var(--gray-600) !important;
}

.bg-gray-strong {
    background: var(--gray-800) !important;
}

.bg-gray-light {
    background: var(--gray-400) !important;
}

.bg-gray-soft {
    background: var(--gray-50) !important;
}

.bg-gray-soft02 {
    background: var(--gray-100) !important;
}

.bg-gray-softL {
    border: 1px solid var(--gray-200) !important;
    background: var(--gray-50) !important;
}

.bg-blue {
    background: var(--blue-600) !important;
}

.bg-blue-strong {
    background: var(--blue-900) !important;
}

.bg-blue-light {
    background: var(--blue-400) !important;
}

.bg-blue-soft {
    background: var(--blue-50) !important;
}

.bg-blue-softL {
    border: 1px solid var(--blue-100) !important;
    background: var(--blue-50) !important;
}

.bg-red {
    background: var(--red-600) !important;
}

.bg-red-strong {
    background: var(--red-800) !important;
}

.bg-red-light {
    background: var(--red-400) !important;
}

.bg-red-soft {
    background: var(--red-100) !important;
}

.bg-red-softL {
    border: 1px solid var(--red-200) !important;
    background: var(--red-100) !important;
}

.bg-green {
    background: var(--green-600) !important;
}

.bg-green-strong {
    background: var(--green-800) !important;
}

.bg-green-light {
    background: var(--green-400) !important;
}

.bg-green-soft {
    background: var(--green-100) !important;
}

.bg-green-softL {
    border: 1px solid var(--green-200) !important;
    background: var(--green-100) !important;
}

.bg-purple {
    background: var(--purple-600) !important;
}

.bg-purple-strong {
    background: var(--purple-800) !important;
}

.bg-purple-light {
    background: var(--purple-400) !important;
}

.bg-purple-soft {
    background: var(--purple-100) !important;
}

.bg-purple-softL {
    border: 1px solid var(--purple-200) !important;
    background: var(--purple-100) !important;
}

.bg-pink {
    background: var(--pink-600) !important;
}

.bg-pink-strong {
    background: var(--pink-800) !important;
}

.bg-pink-light {
    background: var(--pink-300) !important;
}

.bg-pink-soft {
    background: var(--pink-100) !important;
}

.bg-pink-softL {
    border: 1px solid var(--pink-200) !important;
    background: var(--pink-100) !important;
}

.bg-yellow {
    background: var(--yellow-500) !important;
}

.bg-yellow-strong {
    background: var(--yellow-600) !important;
}

.bg-yellow-light {
    background: var(--yellow-300) !important;
}

.bg-yellow-soft {
    background: var(--yellow-100) !important;
}

.bg-yellow-softL {
    border: 1px solid var(--yellow-200) !important;
    background: var(--yellow-100) !important;
}

.bg-pr {
    background: var(--primary) !important;
}

.bg-pr-strong {
    background: var(--primaryHard) !important;
}

.bg-pr-light {
    background: var(--primarySoft) !important;
}

.bg-pr-soft {
    background: var(--pr-bg) !important;
}

.bg-pr-softL {
    border: 1px solid var(--pr-line) !important;
    background: var(--pr-bg) !important;
}

.bg-sub {
    background: var(--secondary) !important;
}

.bg-sub-strong {
    background: var(--secondaryHard) !important;
}

.bg-sub-light {
    background: var(--secondarySoft) !important;
}

.bg-sub-soft {
    background: var(--blue-200) !important;
}

.bg-sub-softL {
    border: 1px solid var(--blue-300) !important;
    background: var(--blue-200) !important;
}



/* ============================ [ border none ] ============================ */
.bd-none {
    border: none !important;
}

.bd-top-none {
    border-top: none !important;
}

.bd-bottom-none {
    border-bottom: none !important;
}

.bd-left-none {
    border-left: none !important;
}

.bd-right-none {
    border-right: none !important;
}






/* ============================ [ common ] ============================ */
.inner {
    width: 1280px !important;
    padding: 0 var(--spacing-40);
    margin: 0 auto;
}

/* form */
form label {
    display: block;
    color: var(--gray-500);
    font-size: var(--fs-13);
    font-weight: 500;
}

label.essential::after {
    display: inline-block;
    content: '*';
    color: var(--red-500);
    padding-left: var(--spacing-4);
}

nav, 
footer {
    width: 100%;
}

.wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-tit {
    color: var(--gray-900);
    font-size: var(--fs-24);
    font-weight: 700;
    line-height: 1.3;
}

/* checkbox */
.list__form-checkbox,
.detail__form--checkbox {
    width: 16rem;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
}

.list__form-checkbox input,
.detail__form--checkbox input {
    padding: 0;
    cursor: pointer;
}

.detail__form--checkbox input[type="checkbox"] {
    margin: 0;
}

.list__form-checkbox input {
    height: 2.4rem;
}

.list__form-checkbox label,
.detail__form--checkbox label {
    color: var(--gray-700);
    font-size: var(--fs-13);
    padding-bottom: 0 !important;
    cursor: pointer;
}

.list__form-checkbox label {
    padding-top: 1px;
}

.detail__form--add {
    background: var(--gray-100);
    padding: var(--spacing-32) var(--spacing-24);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
}



/* ============================ [ header - menu nav ] ============================ */
nav .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* nav top */
.navBar-top {
    background: var(--white);
    padding: var(--spacing-8) 0;
}

.navBar-top .inner {
    height: 3.2rem;
    justify-content: space-between;
    gap: var(--spacing-16);
}

.navBar__button-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);    
}

.navBar__button {
    width: fit-content;
    height: 3.2rem;
    padding: 0 var(--spacing-12);
    color: var(--gray-600);
    font-weight: 500;
    line-height: inherit;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.navBar__button-user,
.navBar__button-user:hover {
    border: 1px solid var(--white);
    padding: 0 var(--spacing-12);
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.navBar__button-user::before,
.navBar__button-user:hover::before {
    content: '';
    width: 2rem;
    height: 2rem;
    background: url('../images/ico_topUser.svg') no-repeat center center;
}

.navBar__button-signout,
.navBar__button-signin {
    background: var(--white);
    border: 1px solid var(--gray-300);
}

.navBar__button:hover,
.navBar__button:focus,
.navBar__button:active {
    transition: all 0.2s;
    color: var(--primary);
    border: 1px solid var(--primary);
}

/* nav bottom */
.navBar-bottom {
    background: var(--bg-header); 
}

.navBar__menu {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--spacing-40);
    padding: 0 4px;
}

.navBar__menu-item {
    position: relative;
    display: block;
    padding: var(--spacing-28) var(--spacing-2);
    color: var(--white);
    font-size: var(--fs-16);
    font-weight: 700;
    transition: all 0.2s;
}

.navBar__menu-item:hover,
.navBar__menu-item:active,
.navBar__menu-item:focus,
.navBar__menu-item.active {
    color: var(--primarySoft) !important;
}

.navBar__menu-item.active::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 6px;
    left: 0;
    bottom: 0;
    background: var(--primarySoft);
}


/* mobile nav */
.navBar-mobile  {
    display: none;
}





/* ============================ [ footer ] ============================ */
footer {
    position: relative;
    height: var(--footer-h); 
    padding: var(--spacing-40) 0;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}

footer .inner {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-16);    
}

footer > * {
    color: var(--gray-600);
    font-size: var(--fs-13);
}

.footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.footer-info {
    flex-shrink: 0;
    align-items: flex-end;
}

.footer-address {
    flex-grow: 1;
}

.footer li {
    position: relative;
    padding-left: var(--spacing-20);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-40);
}

.footer li a,
.footer li a:hover {
    font-weight: 700;
    line-height: unset;
}

.footer-address li::before {
    position: absolute;
    content: '';
    width: 1.4rem;
    height: 1.4rem;
    top: 1px;
    left: 0;
    background-image: url("../images/ico_location.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.75;
}

.footer-address span.label {
    color: var(--gray-700);
    font-weight: 700;
    display: flex;
    align-items: center;
}

.footer-info li a {
    width: 100%;
    text-align: right;
}

.footer li a:hover,
.footer li a:active,
.footer li a:focus,
.footer-info li a:hover,
.footer-info li a:active,
.footer-info li a:focus {
    text-decoration: underline;
}

.footer__button {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
}

.footer__button li {
    padding: 0;
}

.footer__button li a {
    position: relative;
    padding-left: 1.6rem;
}

.footer__button li a::before {
    position: absolute;
    content: '';
    left: 0;
    top: 3px;
    width: 2px;
    height: 10px;
    background: var(--gray-300);
}

.footer__button li:first-child a {
    padding-left: 0;
}

.footer__button li:first-child a::before {
    display: none;
}

.footer li.copyright {
    color: var(--gray-400) !important;
}


/* ============================ [ pagination ] ============================ */
.list__pagination {
    padding: var(--spacing-8) 0 var(--spacing-16);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
}

.pagination a {
    display: inline-block;
    width: fit-content;
    height: fit-content;
}

.pagination a span {    
    width: 2.8rem;
    height: 2.8rem;    
    color: var(--gray-600);
    font-size: var(--fs-13);
    font-weight: 500;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination a span:hover,
.pagination a span:focus {
    background: var(--gray-100);
}

/* 현재페이지 */
.pagination a.active {
    pointer-events: none;
}

.pagination a.active span {
    background: var(--gray-700);
    color: var(--white);
}

/* disabled */
.pagination a.disabled {
    pointer-events: none;
}

.pagination a.disabled span {
    color: var(--gray-400);
}

/* 이동 버튼 */
.pagination-actions {
    border-radius: 0;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transition: all 0.2s !important;
    opacity: 0.5;
}

.pagination-actions.first {
    background-image: url("../images/ico_first.svg") !important;
}

.pagination-actions.prev {
    background-image: url("../images/ico_prev.svg") !important;
}

.pagination-actions.next {
    background-image: url("../images/ico_next.svg") !important;
}

.pagination-actions.last {
    background-image: url("../images/ico_last.svg") !important;
}

.pagination a:hover .pagination-actions {
    opacity: 1;
}

.pagination a.disabled .pagination-actions {
    opacity: 0.25;
}



/* ============================ [ go top button ] ============================ */
.go-top {
    position: absolute;
    width: 4.8rem;
    height: 4.8rem;
    top: -8rem;
    right: var(--spacing-40);    
    line-height: 4.8rem;
    border: 1px solid var(--gray-100);
    border-radius: 50%;
    background: var(--white);
    color: var(--gray-500);
    font-size: var(--fs-12);
    text-align: center;
    transition: all 0.3s;
    box-shadow: 0px 4px 20px 0px rgba(0, 51, 100, .15);
}

.go-top:hover {
    background: var(--gray-600);
    color: var(--white);
    font-weight: 500;
    visibility: visible;
}

.go-top-hide,
.go-top:hover.go-top-hide:hover {
    opacity: 0;
    visibility: hidden;
}



/* ============================ [ etc ] ============================ */
/* table text point color */
.td-emp span {
    color: var(--blue-900);
    font-weight: 700;
    text-align: center;
}

.btn_wrap {
    display: flex;
    justify-content: center;
    gap: var(--spacing-8);
}

.btn_wrap > button,
.btn_wrap > a {
    min-width: 9.6rem;
    width: fit-content;
    height: 4.4rem;
    padding: 0 var(--spacing-16);    
    font-size: var(--fs-15);
    line-height: normal;
}

.btn_wrap > a {
    border-radius: var(--radius-md);
    font-weight: 700;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.txt_guide {
    color: var(--gray-600);
    font-size: var(--fs-16);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

/* message */
.msg_wrong,
.msg_success {
    position: relative;
    padding: 0 var(--spacing-20);
    margin: var(--spacing-8) 0 0;
    font-size: var(--fs-12);
    font-weight: 500;
    line-height: 1.4rem;
    display: flex;
    align-items: center;
}

.msg_wrong::before,
.msg_success::before {
    position: absolute;
    content: '';
    width: 1.4rem;
    height: 1.4rem;
    left: 0;
    top: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.msg_wrong {
    color: var(--red-500);
}

.msg_wrong::before {
    background-image: url("../images/ico_msg_wrong.svg");
}

.msg_success {
    color: var(--blue-500);
}

.msg_success::before {
    background-image: url("../images/ico_msg_check.svg");
}

/* checkbox */
.chk_box {
    position: relative; 
    display: block;
    color: var(--gray-700);
    font-size: var(--fs-15);
    font-weight: 700;
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
    cursor: pointer; 
}

/* default checkbox hide */
.chk_box input[type="checkbox"] { 
    display: none; 
}

/* checkbox custom */
.on { 
    position: absolute;
    border-radius: var(--radius-sm);
}

.on:after { 
    content: ""; 
    position: absolute; 
    display: none; 
}

.chk_box input[type="checkbox"]:checked + .on:after { 
    display: block; 
}

.on:after { 
    width: 6px; 
    height: 10px; 
    border-width: 0 2px 2px 0; 
    -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
    position: absolute; 
}


/********** timeout label **********/
.lb_wrap {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.timeout_wrap {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.timeout_wrap span {
    color: var(--red-500);
    font-size: var(--fs-15);
    font-weight: 900;
    line-height: 150%;
    padding-bottom: 1px;
}

.timeout_wrap .label {
    position: relative;
    padding-left: var(--spacing-22);
    padding-bottom: 0;
    font-size: var(--fs-14);
    font-weight: 600;
    display: flex;
    align-items: center;
}

.timeout_wrap .label::before {
    position: absolute;
    content: '';
    width: 2rem;
    height: 2rem;
    left: 0;
    top: 0;
    background-image: url("../images/ico_timeout.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;    
}

.timeout_wrap button {
    background: var(--red-500);
    color: var(--white);
    font-size: var(--fs-13);
    font-weight: 500;
    padding: var(--spacing-4) var(--spacing-6);
    margin-bottom: var(--spacing-2);
}

.timeout_wrap button:hover {
    background: var(--red-500);
}



/* ============================ [ mediaquery ] ============================ */
@media screen and (max-width: 1360px) {
    .inner {
        width: 100% !important;
    }
}

@media screen and (max-width: 768px) {
    /* navBar */
    .navBar-bottom {
        display: none;
    }
    
    .navBar-top {
        border-bottom: 1px solid var(--form-100);
    }
    
    .navBar-top .inner {
        height: 5.6rem !important;
    }
    
    .navBar__button-group {
        gap: var(--spacing-16);
    }
    
    .navBar__button {
        width: 2.4rem;
        height: 2.4rem;
    }
    
    .navBar__button:hover,
    .navBar__button:focus,
    .navBar__button:active {
        transition: all 0.2s;
        color: transparent;
        border: 0;
    }
    
    .navBar__button-user,
    .navBar__button-signout,
    .navBar__button-signin {
        display: none;
    }
        
    .navBar-mobile {
        display: block;
        position: relative;
    }
    
    .navBar__toggle {
        display: none;
    }    
    
    .navBar__toggle-icon {
        display: block !important;
        background: url('../images/ico_mobile_menu.svg') no-repeat center center;
        cursor: pointer;
    }

    /* 메뉴 스타일 */
    .navBar-mobile__content {
        display: none;
        position: absolute;
        width: 220px;
        top: 40px;
        right: -12px;
        padding: var(--spacing-16) var(--spacing-24) var(--spacing-24);
        margin: 0;
        background-color: var(--gray-700);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow);
        z-index: 9999;
    }
    
    .navBar__menu {
        padding: 0 0 var(--spacing-16) !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0;
    }

    .navBar__menu-item  {
        padding: var(--spacing-16) 0 !important;
        font-size: var(--fs-15);
    }
    
    .navBar__menu-item.active::before {
        display: none;
    }

    .navBar__toggle:checked ~ .navBar-mobile__content  {
        display: block;
    }
    
    .navBar__button-mobile,
    .navBar__button-mobile:hover {
        display: block;
        position: relative;
        height: fit-content;
        margin: var(--spacing-16) 0;
        padding: 0 0 0 var(--spacing-24) !important;
        background: transparent;
        color: var(--gray-300);
        font-weight: 400;
        line-height: inherit;
        border: 0;
        border-radius: 0;
    }
    
    .navBar__button-mobile::before,
    .navBar__button-mobile:hover::before {
        position: absolute;
        content: '';
        width: 1.6rem !important;
        height: 1.6rem !important;
        left: 0;
        top: 0;
    }
    
    .navBar__button-mobile.navBar__button-user::before,
    .navBar__button-mobile.navBar__button-user:hover::before {
        background: url('../images/ico_topUser_white.svg') no-repeat center center;
        background-size: contain;
    }
    
    .navBar__button-mobile.navBar__button-signout::before {
        background: url('../images/ico_logout_white.svg') no-repeat center center;
    }
    
    .navBar__button-mobile.navBar__button-signin::before {
        background: url('../images/ico_login_white.svg') no-repeat center center;
    }
    
    .navBar__button-mobile.navBar__button-signout:hover,
    .navBar__button-mobile.navBar__button-signout:active,
    .navBar__button-mobile.navBar__button-signout:focus,
    .navBar__button-mobile.navBar__button-signin:hover,
    .navBar__button-mobile.navBar__button-signin:active,
    .navBar__button-mobile.navBar__button-signin:focus {
        text-decoration: underline;
    }
  
        
    /* footer */
    footer {
        background: var(--gray-800);
    }
    
    footer > * {
        color: var(--gray-300);
    }
    
    footer .inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: unset;
    }
    
    .footer-info {
        align-items: flex-start;
    }
    
    .footer-info li {
        padding-left: 0;
    }
    
    .footer-info li a {
        text-align: left;
    }
    
    .footer-address li::before {
        background-image: url('../images/ico_location_white.svg');
    }
    
    .footer__button li a::before {
        background: var(--gray-600);
    }
    
    /* pagination */
    .list__pagination {
        padding: var(--spacing-32) 0;
    }
    
}

@media screen and (max-width: 500px) {
    
}