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


* {
    font-family: 'pretendard';
    box-sizing: border-box;
}

/* Color */
:root {
    /* Color  - Grey*/
    --Color-Grey-100: #FFFFFF;
    --Color-Grey-200: #F2F2F2;
    --Color-Grey-300: #DDDDDD;
    --Color-Grey-400: #C5C5C5;
    --Color-Grey-500: #999999;
    --Color-Grey-600: #777777;
    --Color-Grey-700: #555555;
    --Color-Grey-800: #333333;
    --Color-Grey-900: #111111;

    /* Color  - Primary*/
    --Color-Primary-100: #F7F3FF;
    --Color-Primary-200: #E2D3FF;
    --Color-Primary-300: #B993FF;
    --Color-Primary-400: #9B66FD;
    --Color-Primary-500: #7A3EE6;
    --Color-Primary-600: #5413CC;
    --Color-Primary-700: #3E06A4;
    --Color-Primary-800: #2A046E;
    --Color-Primary-900: #1A0246;

    /* Color  - Gradient*/
    --Color-Gradient: linear-gradient(96.55deg, #F5F0FF 9.07%, #E3EDFF 90.93%);

    /* Color  - Error*/
    --Color-Error-100: #FFECEC;
    --Color-Error-200: #FFCFCF;
    --Color-Error-300: #F99E9E;
    --Color-Error-400: #FF6262;
    --Color-Error-500: #EC3838;
    --Color-Error-600: #D00B0B;
    --Color-Error-700: #990000;
    --Color-Error-800: #790000;
    --Color-Error-900: #4C0000;

    /* Color  - Success*/
    --Color-Success-100: #E9FFF4;
    --Color-Success-200: #ACF9D3;
    --Color-Success-300: #5FE9A4;
    --Color-Success-400: #26C977;
    --Color-Success-500: #009E4F;
    --Color-Success-600: #006C36;
    --Color-Success-700: #004C26;
    --Color-Success-800: #003C1E;
    --Color-Success-900: #002412;
}

/*  Font Style  */
.Font_T1 {
    font-weight: 700;
    font-size: 32px;
    line-height: 134%;
    letter-spacing: -1%;
}

.Font_H1 {
    font-weight: 600;
    font-size: 24px;
    line-height: 140%;
    letter-spacing: -1%;
}

.Font_H2 {
    font-weight: 600;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: -1%;
}

.Font_B1 {
    font-weight: 500;
    font-size: 16px;
    line-height: 148%;
    letter-spacing: -1%;
}

.Font_B2 {
    font-weight: 500;
    font-size: 14px;
    line-height: 148%;
    letter-spacing: -1%;
}

.Font_Bt1 {
    font-weight: 600;
    font-size: 16px;
    line-height: 148%;
    letter-spacing: -1%;
}

.Font_Lb1 {
    font-weight: 600;
    font-size: 15px;
    line-height: 140%;
    letter-spacing: -1%;
}

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

a,
a:link,
a:visited,
a:active,
a:hover {
	text-decoration: none;
}

a:focus,
a:focus-visible {
	outline: none !important;
	/*border: 1px solid var(--Color-Primary-300) !important;*/
	box-shadow: none !important;
}

/* checkbox style */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

input.readonly{
	background-color: var(--Color-Grey-200);
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.custom-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid var(--Color-Grey-500);
    border-radius: 4px;
    background-color: var(--Color-Grey-100);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
}

.checkbox-wrapper input:checked + .custom-checkbox {
    background-color: var(--Color-Primary-500);
    border-color: var(--Color-Primary-500);
}

.checkbox-wrapper input:disabled + .custom-checkbox {
    background-color: var(--Color-Grey-200);
    opacity: 0.4;
    cursor: not-allowed;
}

.custom-checkbox svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    width: 14px;
    height: 14px;
    stroke: var(--Color-Grey-100);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.checkbox-wrapper input:checked + .custom-checkbox svg {
    display: block;
}

.label-text {
    color: var(--Color-Grey-800);
    user-select: none;
    width: calc(100% - 36px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkbox-wrapper input:disabled ~ .label-text {
    color: var(--Color-Grey-500);
    cursor: not-allowed;
}

/* Radio style */
.radio-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.radio-wrapper input[type="radio"] {
    display: none;
}

.custom-radio {
    width: 24px;
    height: 24px;
    border: 2px solid var(--Color-Grey-500);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background-color 0.2s;
}

.custom-radio::after {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--Color-Primary-500);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.radio-wrapper input[type="radio"]:checked {
    border-color: var(--Color-Primary-500);
}

.radio-wrapper input[type="radio"]:checked + .custom-radio {
    border-color: var(--Color-Primary-500);
}

.radio-wrapper input[type="radio"]:checked + .custom-radio::after {
    opacity: 1;
}

.radio-wrapper input[type="radio"]:disabled + .custom-radio {
    background-color: var(--Color-Grey-200);
    opacity: 0.4;
    cursor: not-allowed;
}

.radio-wrapper input[type="radio"]:disabled + .custom-radio::after {
    background-color: var(--Color-Grey-200);
}

/* Switch style */
.switch-wrapper {
    display: flex;
}

.switch-wrapper .switch {
    appearance: none;
    background-color: var(--Color-Grey-400);
    border-radius: 16px;
    border-style: none;
    flex-shrink: 0;
    height: 32px;
    margin: 0;
    position: relative;
    width: 52px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.switch-wrapper .switch::before {
    content: "";
    position: absolute;
    inset: -6px;
}

.switch-wrapper .switch::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    top: 5px;
    left: 5px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}

.switch-wrapper .switch::after {
    background-color: var(--Color-Grey-100);
    border-radius: 50%;
    content: "";
    height: 22px;
    left: 5px;
    position: absolute;
    top: 5px;
    width: 22px;
}

.switch-wrapper .switch:checked {
    background-color: var(--Color-Primary-500);
}

.switch-wrapper .switch:checked::after {
    transform: translateX(20px);
}

/* MoveButton style*/
.movebtn-wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
}

.movebtn-wrapper .move_btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.move_btn.primary {
    background-color: var(--Color-Primary-500);
}

.move_btn.grey {
    background-color: var(--Color-Grey-300);
}

.move_btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke: var(--Color-Grey-100);
}

.move_btn.grey svg {
    stroke: var(--Color-Grey-600);
}

/* Button style*/
.btn_basic {
    padding: 0 16px;
    height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    gap: 4px;
}

.btn_big {
    padding: 0 28px;
    height: 48px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    gap: 4px;
}

.btn_text {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    text-decoration: underline !important;
    color: var(--Color-Primary-600);
}

.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.disabled:hover {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.btn_primary {
    background-color: var(--Color-Primary-500);
    color: var(--Color-Grey-100);
}

.btn_primary:hover,
.btn_primary:active {
    background-color: var(--Color-Primary-600);
}

.btn_secondary {
    border: 1px solid var(--Color-Primary-600);
    color: var(--Color-Primary-600);
}

.btn_big.btn_secondary,
.btn_big.btn_Line {
    border-width: 2px;
}

.btn_teritary {
    background-color: var(--Color-Grey-200);
    color: var(--Color-Grey-800);
}

.btn_Line {
    border: 1px solid var(--Color-Grey-300);
    color: var(--Color-Grey-800);
}


.btn_basic svg{
    width: 16px;
    height: 16px;
}
.btn_big svg {
	width: 20px;
    height: 20px;
}
/*
.btn_basic.btn_primary svg,
.btn_big.btn_primary svg {
    filter: invert(100%) sepia(2%) saturate(2%) hue-rotate(257deg) brightness(105%) contrast(100%);
}
.btn_basic.btn_secondary svg,
.btn_big.btn_secondary svg,
.btn_text svg {
    filter: invert(0%) sepia(61%) saturate(4535%) hue-rotate(256deg) brightness(75%) contrast(122%);
}
*/
/* Input style */
.input-wrapper {
    width: 442px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-wrapper label {
    display: inline-box;
    color: var(--Color-Grey-900);
}

.input-wrapper .input_desc {
    color: var(--Color-Grey-700);
}

.input-wrapper .input_desc.error {
    color: var(--Color-Error-600);
}

.input-wrapper .essential {
    display: inline-block;
    vertical-align: top;
    width: 4px;
    height: 4px;
    background-color: var(--Color-Primary-500);
    border-radius: 50%;
}

input.input_style {
    border: 1px solid var(--Color-Grey-400);
    border-radius: 8px;
    height: 48px;
    line-height: 48px;
    padding: 0 16px;
    color: var(--Color-Grey-800);
}

input::placeholder {
    color: var(--Color-Grey-500);
}

input:active,
input:focus {
    outline: none;
    border: 1px solid var(--Color-Primary-600);
    box-shadow: none;
}

input:disabled {
    background-color: var(--Color-Grey-200);
    color: var(--Color-Grey-500);
}

.input-wrapper .input_addBtn {
    display: flex;
    gap: 8px
}

.input-wrapper .input_addBtn input.input_style {
    width: 80%;
}

.input-wrapper .input_addBtn a.input_btn{
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--Color-Grey-200);
    color: var(--Color-Grey-800);
    border-radius: 8px;
}

.input-wrapper .input_optionBtn {
    display: flex;
    gap: 8px;
}

.input-wrapper .input_optionBtn input {
    display: none;
}

.input-wrapper .input_optionBtn input + label {
    width: 50%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border: 2px solid var(--Color-Grey-400);
    border-radius: 8px;
    cursor: pointer;
}

.input-wrapper .input_optionBtn input:checked + label {
    border-color: var(--Color-Primary-600);
    background-color: var(--Color-Primary-100);
}

.input-wrapper select {
    appearance: none;
    background: url('/images/icon/ic-nav-arrow-down-078aa643eb976e1d0c96335c97ae558a.svg') no-repeat right 12px center;
    border: 1px solid var(--Color-Grey-400);
    padding: 0 52px 0 16px;
    border-radius: 8px;
    height: 48px;
    line-height: 48px;
    color: var(--Color-Grey-800);
}

.input-wrapper select:active,
.input-wrapper select:focus {
    outline: none;
    box-shadow: none;
}

.input-wrapper select option {
    padding: 0 16px;
    color: var(--Color-Grey-800);
}

.input-wrapper .input_phone {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-wrapper .input_phone input {
    width: 33.333%;
}

.input-wrapper .input_phone .dash {
    color: var(--Color-Grey-700);
}

.search-wrapper {
    display: flex;
    gap: 8px;
}

input.input_style.input_search {
    width: 350px;
    border-color: var(--Color-Grey-600);
    padding-left: 52px;
    padding-right: 16px;
    background-image: url(/images/icon/ic-search-866f1b043b098241a3731c13e614e905.svg);
    background-repeat: no-repeat;
    background-position: 16px center;
}

input.input_style.input_search:active,
input.input_style.input_search:focus {
    border-color: var(--Color-Primary-600);
}


/* Dropdown Style */
.dropdown-wrapper {
    position: relative;
    width: 100%;
    max-width: 442px;
    cursor: pointer;
    user-select: none;
}

.selected-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid var(--Color-Grey-400);
    background: var(--Color-Grey-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    width: 100%;
}

.selected-option .text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.dropdown-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    z-index: 10;
    position: relative;
}


.dropdown-arrow svg {
    width: 24px;
    height: 24px;
    stroke: #333;
    transition: transform 0.3s ease, stroke 0.3s ease;
}

.dropdown-wrapper.active .dropdown-arrow svg {
    transform: rotate(180deg);
}

.dropdown-wrapper {
    position: relative;
    width: 100%;
    cursor: pointer;
}



.dropdown-wrapper.active .dropdown_list {
    display: block;
}

.dropdown_list {
    margin: 8px 0 0 0;
    padding: 8px 0;
    border-radius: 8px;
    border: 1px solid var(--Color-Grey-300);
    display: none;
    position: absolute;
    background: var(--Color-Grey-100);
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.dropdown_list li {
    align-items: center;
    padding: 0 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown_list li label {
    height: 40px;
}

/* Tab style */
.Tab-wrapper {
    width: 100%;
}

.tab_style1 {
    width: 100%;
    border-bottom: 1px solid var(--Color-Grey-400);
    display: flex;
    gap: 24px;
    align-items: center;
}

.tab_style1 li a {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    color: var(--Color-Grey-700);
    padding-bottom: 8px;
    border-bottom: 4px solid var(--Color-Grey-100);
}
.tab_style1 li svg{
	stroke: var(--Color-Grey-700);
}
.tab_style1 li.on a {
    color: var(--Color-Grey-900);
    border-bottom: 4px solid var(--Color-Primary-500);
}
.tab_style1 li.on svg{
	stroke: var(--Color-Grey-900);
}

.tab_style2 {
    display: flex;
    gap: 15px;
}

.tab_style2 li a {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    color: var(--Color-Grey-700);
    height: 40px;
    padding: 0 20px;
    border-radius: 38px;
}

.tab_style2 li.on a {
    color: var(--Color-Grey-100);
    background-color: var(--Color-Primary-500);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
}

.tab_style2 li.on a img {
    /*filter: invert(100%) sepia(96%) saturate(15%) hue-rotate(212deg) brightness(104%) contrast(104%);*/
}

.tab_style3 {
    display: flex;
    width: max-content;
    border: 1px solid var(--Color-Grey-400);
    padding: 3px;
    border-radius: 32px;
}

.tab_style3 li a {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    color: var(--Color-Grey-700);
    height: 40px;
    padding: 0 20px;
    border-radius: 38px;
}

.tab_style3 li.on a {
    color: var(--Color-Grey-100);
    background-color: var(--Color-Primary-500);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
}
 /*
.tab_style3 li.on a img {
   filter: invert(100%) sepia(96%) saturate(15%) hue-rotate(212deg) brightness(104%) contrast(104%);
}
*/
/* Chips style */
.chips_style {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 6px;
    height: 25px;
    border-radius: 4px;
}

.chip_blue {
    background-color: #D0E8FF;
    color: #0051C2;
}

.chip_blue img {
    width: 16px;
    height: 16px;
    /*filter: invert(19%) sepia(81%) saturate(2769%) hue-rotate(208deg) brightness(97%) contrast(101%);*/
}

.chip_orange {
    background-color: #FFE3C8;
    color: #C34B00;
}

.chip_orange img {
    width: 16px;
    height: 16px;
    /*filter: invert(28%) sepia(83%) saturate(3419%) hue-rotate(22deg) brightness(94%) contrast(101%);*/
}

.chip_green {
    background-color: var(--Color-Success-100);
    color: var(--Color-Success-600);
}

.chip_grey {
    background-color: var(--Color-Grey-200);
    color: var(--Color-Grey-700);
}

.chip_red {
    background-color: var(--Color-Error-100);
    color: var(--Color-Error-600);
}

.chip_purple {
    background-color: var(--Color-Primary-100);
    color: var(--Color-Primary-600);
}

/* Toast Style */
body.swal2-toast-shown .swal2-container {
    width: auto;
}

/* 토스트 */
.my_toast.swal2-toast {
    background-color: #000 !important;
    color: var(--Color-Grey-100);
    width: 400px !important;
    padding: 24px !important;
    border-radius: 16px;
    position: fixed !important;
    left: inherit;
    top: inherit;
    right: 24px !important;
    bottom: 40px !important;
    box-sizing: border-box;
}

.my_toast .swal2-html-container {
    margin: 0 !important;
}

/* 토스트 내용 */
.my_toast_content {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 토스트 커스텀 아이콘 */
.my_icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin: 0;
}

/* 토스트 닫기버튼 */
.my_toast .swal2-close:hover {
    color: var(--Color-Grey-100) !important;
}

/* modal style */

/* 알림 모달 */
.swal2-modal.notice_modal {
    padding: 0;
    border-radius: 20px;
    width:auto;
}

.notice_modal .swal2-html-container {
    margin: 0;
    padding: 40px 24px 24px;
    box-sizing: border-box;
}

.notice_modal .modal_title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.notice_modal .modal_content {
    margin-bottom: 40px;
    text-align: left;
    color:var(--Color-Grey-700);
}

.notice_modal .modal_btn_wrap {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/*  기본 모달 */
.swal2-modal.basic_modal {
    padding: 0;
    border-radius: 20px;
    width: 680px;
    max-height: 630px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.basic_modal .swal2-html-container {
    margin: 0;
    padding: 0;
    width: 100%;
}

.basic_modal .modal_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    height: 94px;
    border-bottom: 1px solid var(--Color-Grey-300);
    color: var(--Color-Grey-900);
    flex-shrink: 0;
}

.basic_modal .modal_btn_wrap {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    height: 108px;
    padding: 24px 40px 36px 40px;
    flex-shrink: 0;
}

.basic_modal .modal_content {
    padding: 24px 40px 0;
    overflow-y: auto; 
    flex: 1 1 auto;
    text-align: left;
    max-height: calc(630px - 94px - 108px);
    color:var(--Color-Grey-700);
}

.basic_modal .modal_close_btn {
    cursor: pointer;
}

/* Pagination Style */
.paging_wrap{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:6px;
    margin-top:24px;
}
.paging_wrap .page_list{
    display: flex;
    gap:8px;
}
.paging_wrap .page_list a{
    display: flex;
    align-items: center;
    justify-content: center;
    width:36px;
    height:36px;
    color:var(--Color-Grey-700);
    border-radius: 10px;
    background-color: var(--Color-Grey-200);
}
.paging_wrap .page_list a.current{
    color:var(--Color-Grey-100);
    background-color: var(--Color-Primary-500);
}
.paging_wrap .list a.dotdotdot{
    background:none;
}

/* box style */
.basic_box{
    border-radius: 16px;
    background-color: var(--Color-Grey-100);
    box-sizing: border-box;
}
.basic_box.gradient{
    background: linear-gradient(96.55deg, #F5F0FF 9.07%, #E3EDFF 90.93%);
}
.basic_box.primary{
    background-color: var(--Color-Primary-100);
}
.basic_box.grey{
    background-color: var(--Color-Grey-200);
}
.basic_box.border{
    border:1px solid var(--Color-Grey-400);
}

/* Table Style */
.table_wrap{
    overflow: hidden;
    position: relative;
    /*max-height:500px;*/
    overflow-y:auto;
}
.table_wrap::-webkit-scrollbar{
    display: none;
}
.table_wrap > table > thead > tr {
    position: sticky;
    left:0;
    top:0;
    z-index: 20;
}
.table_wrap.border_round{
    border:1px solid var(--Color-Grey-300);
    border-radius: 16px;
}
td.r_merge{
    text-align: center;
}
table.table_type1{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 16px;
}
table.table_type1 td{
    border:none;
    padding:16px 0 16px 24px;
}
table.table_type1 > thead > tr > th{
    background-color: var(--Color-Primary-100);
    padding: 16px 0 16px 24px;
}
table.table_type1 > thead > tr > th:first-of-type{
    border-top-left-radius: 16px;
}
table.table_type1 > thead > tr > th:last-of-type{
    background-color:var(--Color-Primary-100);
    border-radius: 0 16px 0 0;
}
table.table_type1 > tbody > tr > td{
    border-bottom: 1px solid var(--Color-Grey-300); 
}
table.table_type1 > tbody > tr > td:last-of-type{
    padding-right:24px;
}
table.table_type1 > tbody > tr:last-of-type > td{
    border-bottom: none;
}
table.table_type2{
    width: 100%;
}
table.table_type2 > thead > tr > th{
    background-color: var(--Color-Primary-100);
    padding:16px 0 16px 24px;
}
table.table_type2 > thead > tr > th:first-of-type{
    border-radius: 8px 0 0 8px;
}
table.table_type2 > thead > tr > th:last-of-type{
    border-radius: 0 8px 8px 0;
}
table.table_type2 > tbody > tr > td{
    border-left:none;
    border-right:none;
    border-top:none;
    padding: 16px 0 16px 24px;
}
table.table_type2 > tbody > tr > td:last-of-type{
    padding-right:24px;
}

/* Spinner Style*/
.loader.type1 {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #009FE1;
  border-right-color: #F89D1B;
  animation: loader_type1 1s infinite linear;
}
@keyframes loader_type1 {to{transform: rotate(1turn)}}


.loader.type2 {
  width: 50px;
  --b: 8px; 
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%,#00A1DF) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation: loader_type2 1s infinite steps(10);
}
@keyframes loader_type2 {to{transform: rotate(1turn)}}

.loader.type3 {
  width: 50px;
  aspect-ratio: 1;
  display:grid;
  -webkit-mask: conic-gradient(from 15deg,#0000,#000);
  animation: loader_type3 1s infinite steps(12);
}
.loader.type3,
.loader.type3:before,
.loader.type3:after{
  background:
      radial-gradient(closest-side at 50% 12.5%,#7A3EE6 96%,#0000) 50% 0/20% 80% repeat-y,
      radial-gradient(closest-side at 12.5% 50%,
     #7A3EE6 96%,#0000) 0 50%/80% 20% repeat-x;
}
.loader.type3:before,
.loader.type3:after {
  content: "";
  grid-area: 1/1;
  transform: rotate(30deg);
}
.loader.type3:after {
  transform: rotate(60deg);
}

@keyframes loader_type3 {
  100% {transform:rotate(1turn)}
}
/* 경고 문구 폰트 색상 지정 */
.warning_text{
	color:var(--Color-Error-600);
}

/* custom-modal 디자인 변경 css */
.swal2-modal.custom-modal{
	border-radius: 20px;
	padding:0;
}
.swal2-modal.custom-modal #swal2-html-container{
	padding:0;
}

.swal2-modal.custom-modal .modal_content_title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height:94px;
	color:var(--Color-Grey-900);
	border-bottom:1px solid var(--Color-Grey-300);
	padding:0 40px;
	box-sizing: border-box;
}
.swal2-modal.custom-modal .modal-body{
	text-align: left;
}
.swal2-modal.custom-modal .modal_content_title .modal_close_btn{
	cursor: pointer;
}
.swal2-modal.custom-modal .modal_content_body{
	padding: 24px 40px 0;
	overflow-x: hidden;
    overflow-y: auto;
}
.swal2-modal.custom-modal .swal2-actions{
	width:100%;
	justify-content: flex-end;
	padding: 24px 40px 36px 40px;
	gap:12px;
	margin-top:0;
}
.swal2-modal.custom-modal .swal2-actions button{
	margin:0;
	border:none;
}

.title_text.alert_title{
	color:var(--Color-Grey-900);
}

/* 첨부파일 등록 */
.attach_file_box .add_file_wrap{
	position: relative;
}
.attach_file_box #fileInput{
	position: absolute;
	width:0;
	height:0;
	opacity: 0;
}
.attach_file_box .upload_btn{
	color:var(--Color-Grey-100);
	cursor: pointer;
}
.attach_file_box #file_name{
	border:none;
}
.attach_file_box #file_name::placeholder{
	color:var(--Color-Grey-600);
}

.attach_file_box .file_list{
	display: none;
	margin-top:40px;
}
.attach_file_box .file_item{
	display: flex;
	justify-content: space-between; 
	align-items: center; 
	color:var(--Color-Grey-700);
}
.attach_file_box .file_delete_btn{
	border: none; 
	background: none; 
	color: #A6A6A6; 
}