@charset "utf-8";
/* CSS Document */

/* ------------------------- Reset : Start ------------------------- */
html { font-size: 12px; }
body { font-family: 'Pretendard', 'MalgunGothic', sans-serif; }
h6, h5, h4, h3, h2, h1, .h6, .h5, .h4, .h3, .h2, .h1, p { margin-bottom: 0; }
h6, h5, h4, h3, h2, h1, .h6, .h5, .h4, .h3, .h2, .h1 { line-height: 1.4; }
[class*="fs-"] { word-break: keep-all; }
ol, ul { padding-left: 0; list-style-type: none; }
li::marker { content: ''; }
a { text-decoration: none; color: inherit !important; cursor: pointer; word-wrap: break-word; word-break: break-all; }
:focus-visible { outline: none; }
img { max-width: 100%; }


/* 360px 이상 -- 모바일  */
@media (min-width: 360px) {
    html { font-size: 14px; }
}

/* 393px 이상 -- 모바일  */
@media (min-width: 393px) {
    html { font-size: 16px; }
}

/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    html { font-size: 16px; }
}
/* ------------------------- Reset : End ------------------------- */





/* ------------------------- Common : Start ------------------------- */
.link-underline {
    text-decoration-color: inherit !important;
    text-decoration: underline;
}
.flex-1 {
    flex: 1 !important;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}
.divider {
    height: 0;
    margin: var(--sz-20) 0;
    border-top: 1px solid var(--gray-100);
}
/* ------------------------- Common : End ------------------------- */





/* ------------------------- Container : Start ------------------------- */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    --bs-gutter-x: var(--sz-20);
}
.row {
    --bs-gutter-x: var(--sz-20);
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        --bs-gutter-x: var(--sz-32);
    }
    .row {
        --bs-gutter-x: var(--sz-32);
    }
}

/* 1400px 이상 -- 데스크탑 (xxl) */
@media (min-width: 1400px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1216px;
        /* margin-right: 0; */
        margin-right: var(--sz-16);
    }
}

/* 1601px 이상 -- 데스크탑 (xxl) */
@media (min-width: 1601px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        margin-right: auto;
    }
}
/* ------------------------- Container : End ------------------------- */





/* ------------------------- Width : Start ------------------------- */
.w-5 {
    width: 5% !important;
}
.w-10 {
    width: 10% !important;
}
.w-20 {
    width: 20% !important;
}
.w-30 {
    width: 30% !important;
}
.w-40 {
    width: 40% !important;
}
.w-50 {
    width: 50% !important;
}
.w-60 {
    width: 60% !important;
}
.w-70 {
    width: 70% !important;
}
.w-80 {
    width: 80% !important;
}
.w-90 {
    width: 90% !important;
}
.w-95 {
    width: 95% !important;
}
.w-100 {
    width: 100% !important;
}
.w-auto {
    width: auto !important;
}


.form-select.w-30 + .use-bootstrap-select-wrapper {
    width: calc(33% - var(--sz-13)) !important;
}
.form-select.w-30 + .use-bootstrap-select-wrapper .use-bootstrap-select .form-select {
    width: 100% !important;
}
.form-select.w-20 + .use-bootstrap-select-wrapper {
    width: 20% !important;
}
.form-select.w-20 + .use-bootstrap-select-wrapper .use-bootstrap-select .form-select {
    width: 100% !important;
}
.form-select.w-auto + .use-bootstrap-select-wrapper {
    width: auto !important;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .w-xl-10 {
        width: 10% !important;
    }
    .w-xl-20 {
        width: 20% !important;
    }
    .w-xl-30 {
        width: 30% !important;
    }
    .w-xl-40 {
        width: 40% !important;
    }
    .w-xl-50 {
        width: 50% !important;
    }
    .w-xl-60 {
        width: 60% !important;
    }
    .w-xl-70 {
        width: 70% !important;
    }
    .w-xl-80 {
        width: 80% !important;
    }
    .w-xl-90 {
        width: 90% !important;
    }
    .w-xl-100 {
        width: 100% !important;
    }
    .w-xl-auto {
        width: auto !important;
    }


    .form-select.w-30 + .use-bootstrap-select-wrapper {
        width: calc(33% - var(--sz-13)) !important;
    }
    .form-select.w-xl-20 + .use-bootstrap-select-wrapper {
        width: 20% !important;
    }
    .form-select.w-xl-20 + .use-bootstrap-select-wrapper .use-bootstrap-select .form-select {
        width: 100% !important;
    }
}
/* ------------------------- Width : End ------------------------- */





/* ------------------------- W, H Size : Start ------------------------- */
.sz-280 {
    width: var(--sz-280) !important;
    height: var(--sz-280) !important;
}
.sz-160 {
    width: var(--sz-160) !important;
    height: var(--sz-160) !important;
}
.sz-140 {
    width: var(--sz-140) !important;
    height: var(--sz-140) !important;
}
.sz-120 {
    width: var(--sz-120) !important;
    height: var(--sz-120) !important;
}
.sz-107 {
    width: var(--sz-107) !important;
    height: var(--sz-107) !important;
}
.sz-96 {
    width: var(--sz-96) !important;
    height: var(--sz-96) !important;
}
.sz-80 {
    width: var(--sz-80) !important;
    height: var(--sz-80) !important;
}
.sz-72 {
    width: var(--sz-72) !important;
    height: var(--sz-72) !important;
}
.sz-64 {
    width: var(--sz-64) !important;
    height: var(--sz-64) !important;
}
.sz-60 {
    width: var(--sz-60) !important;
    height: var(--sz-60) !important;
}
.sz-56 {
    width: var(--sz-56) !important;
    height: var(--sz-56) !important;
}
.sz-52 {
    width: var(--sz-52) !important;
    height: var(--sz-52) !important;
}
.sz-48 {
    width: var(--sz-48) !important;
    height: var(--sz-48) !important;
}
.sz-40 {
    width: var(--sz-40) !important;
    height: var(--sz-40) !important;
}
.sz-42 {
    width: var(--sz-42) !important;
    height: var(--sz-42) !important;
}
.sz-36 {
    width: var(--sz-36) !important;
    height: var(--sz-36) !important;
}
.sz-32 {
    width: var(--sz-32) !important;
    height: var(--sz-32) !important;
}
.sz-28 {
    width: var(--sz-28) !important;
    height: var(--sz-28) !important;
}
.sz-24 {
    width: var(--sz-24) !important;
    height: var(--sz-24) !important;
}
.sz-20 {
    width: var(--sz-20) !important;
    height: var(--sz-20) !important;
}
.sz-16 {
    width: var(--sz-16) !important;
    height: var(--sz-16) !important;
}
.sz-14 {
    width: var(--sz-14) !important;
    height: var(--sz-14) !important;
}
.sz-12 {
    width: var(--sz-12) !important;
    height: var(--sz-12) !important;
}
.sz-10 {
    width: var(--sz-10) !important;
    height: var(--sz-10) !important;
}
.sz-6 {
    width: var(--sz-6) !important;
    height: var(--sz-6) !important;
}
.sz-4 {
    width: var(--sz-4) !important;
    height: var(--sz-4) !important;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .sz-xl-280 {
        width: var(--sz-280) !important;
        height: var(--sz-280) !important;
    }
    .sz-xl-160 {
        width: var(--sz-160) !important;
        height: var(--sz-160) !important;
    }
    .sz-xl-140 {
        width: var(--sz-140) !important;
        height: var(--sz-140) !important;
    }
    .sz-xl-120 {
        width: var(--sz-120) !important;
        height: var(--sz-120) !important;
    }
    .sz-xl-107 {
        width: var(--sz-107) !important;
        height: var(--sz-107) !important;
    }
    .sz-xl-96 {
        width: var(--sz-96) !important;
        height: var(--sz-96) !important;
    }
    .sz-xl-80 {
        width: var(--sz-80) !important;
        height: var(--sz-80) !important;
    }
    .sz-xl-72 {
        width: var(--sz-72) !important;
        height: var(--sz-72) !important;
    }
    .sz-xl-64 {
        width: var(--sz-64) !important;
        height: var(--sz-64) !important;
    }
    .sz-xl-60 {
        width: var(--sz-60) !important;
        height: var(--sz-60) !important;
    }
    .sz-xl-56 {
        width: var(--sz-56) !important;
        height: var(--sz-56) !important;
    }
    .sz-xl-52 {
        width: var(--sz-52) !important;
        height: var(--sz-52) !important;
    }
    .sz-xl-48 {
        width: var(--sz-48) !important;
        height: var(--sz-48) !important;
    }
    .sz-xl-42 {
        width: var(--sz-42) !important;
        height: var(--sz-42) !important;
    }
    .sz-xl-40 {
        width: var(--sz-40) !important;
        height: var(--sz-40) !important;
    }
    .sz-xl-36 {
        width: var(--sz-36) !important;
        height: var(--sz-36) !important;
    }
    .sz-xl-32 {
        width: var(--sz-32) !important;
        height: var(--sz-32) !important;
    }
    .sz-xl-28 {
        width: var(--sz-28) !important;
        height: var(--sz-28) !important;
    }
    .sz-xl-24 {
        width: var(--sz-24) !important;
        height: var(--sz-24) !important;
    }
    .sz-xl-20 {
        width: var(--sz-20) !important;
        height: var(--sz-20) !important;
    }
    .sz-xl-16 {
        width: var(--sz-16) !important;
        height: var(--sz-16) !important;
    }
    .sz-xl-14 {
        width: var(--sz-14) !important;
        height: var(--sz-14) !important;
    }
    .sz-xl-12 {
        width: var(--sz-12) !important;
        height: var(--sz-12) !important;
    }
    .sz-xl-10 {
        width: var(--sz-10) !important;
        height: var(--sz-10) !important;
    }
    .sz-xl-6 {
        width: var(--sz-6) !important;
        height: var(--sz-6) !important;
    }
    .sz-xl-4 {
        width: var(--sz-4) !important;
        height: var(--sz-4) !important;
    }
}
/* ------------------------- W, H Size : End ------------------------- */





/* ------------------------- Gap : Start ------------------------- */
.gap-120 {
    gap: var(--sz-120) !important;
}
.gap-100 {
    gap: var(--sz-100) !important;
}
.gap-96 {
    gap: var(--sz-96) !important;
}
.gap-80 {
    gap: var(--sz-80) !important;
}
.gap-76 {
    gap: var(--sz-76) !important;
}
.gap-72 {
    gap: var(--sz-72) !important;
}
.gap-64 {
    gap: var(--sz-64) !important;
}
.gap-60 {
    gap: var(--sz-60) !important;
}
.gap-56 {
    gap: var(--sz-56) !important;
}
.gap-52 {
    gap: var(--sz-52) !important;
}
.gap-48 {
    gap: var(--sz-48) !important;
}
.gap-44 {
    gap: var(--sz-44) !important;
}
.gap-40 {
    gap: var(--sz-40) !important;
}
.gap-32 {
    gap: var(--sz-32) !important;
}
.gap-28 {
    gap: var(--sz-28) !important;
}
.gap-24 {
    gap: var(--sz-24) !important;
}
.gap-20 {
    gap: var(--sz-20) !important;
}
.gap-16 {
    gap: var(--sz-16) !important;
}
.gap-12 {
    gap: var(--sz-12) !important;
}
.gap-8 {
    gap: var(--sz-8) !important;
}
.gap-6 {
    gap: var(--sz-6) !important;
}
.gap-4 {
    gap: var(--sz-4) !important;
}
.gap-2 {
    gap: var(--sz-2) !important;
}
.gap-0 {
    gap: var(--sz-0) !important;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .gap-xl-120 {
        gap: var(--sz-120) !important;
    }
    .gap-xl-100 {
        gap: var(--sz-100) !important;
    }
    .gap-xl-96 {
        gap: var(--sz-96) !important;
    }
    .gap-xl-80 {
        gap: var(--sz-80) !important;
    }
    .gap-xl-76 {
        gap: var(--sz-76) !important;
    }
    .gap-xl-72 {
        gap: var(--sz-72) !important;
    }
    .gap-xl-64 {
        gap: var(--sz-64) !important;
    }
    .gap-xl-60 {
        gap: var(--sz-60) !important;
    }
    .gap-xl-56 {
        gap: var(--sz-56) !important;
    }
    .gap-xl-52 {
        gap: var(--sz-52) !important;
    }
    .gap-xl-48 {
        gap: var(--sz-48) !important;
    }
    .gap-xl-44 {
        gap: var(--sz-44) !important;
    }
    .gap-xl-40 {
        gap: var(--sz-40) !important;
    }
    .gap-xl-32 {
        gap: var(--sz-32) !important;
    }
    .gap-xl-28 {
        gap: var(--sz-28) !important;
    }
    .gap-xl-24 {
        gap: var(--sz-24) !important;
    }
    .gap-xl-20 {
        gap: var(--sz-20) !important;
    }
    .gap-xl-16 {
        gap: var(--sz-16) !important;
    }
    .gap-xl-12 {
        gap: var(--sz-12) !important;
    }
    .gap-xl-8 {
        gap: var(--sz-8) !important;
    }
    .gap-xl-6 {
        gap: var(--sz-6) !important;
    }
    .gap-xl-4 {
        gap: var(--sz-4) !important;
    }
    .gap-xl-2 {
        gap: var(--sz-2) !important;
    }
    .gap-xl-0 {
        gap: var(--sz-0) !important;
    }
}
/* ------------------------- Gap : End ------------------------- */





/* ------------------------- Typo : Start ------------------------- */
.fs-72 {
    font-size: var(--sz-72);
}
.fs-56 {
    font-size: var(--sz-56);
}
.fs-48 {
    font-size: var(--sz-48);
}
.fs-40 {
    font-size: var(--sz-40);
}
.fs-32 {
    font-size: var(--sz-32);
}
.fs-28 {
    font-size: var(--sz-28);
}
.fs-24 {
    font-size: var(--sz-24);
}
.fs-20 {
    font-size: var(--sz-20);
}
.fs-18 {
    font-size: var(--sz-18);
}
.fs-16 {
    font-size: var(--sz-16);
}
.fs-15 {
    font-size: var(--sz-15);
}
.fs-14 {
    font-size: var(--sz-14);
}
.fs-13 {
    font-size: var(--sz-13);
}
.fs-12 {
    font-size: var(--sz-12);
}
.fs-11 {
    font-size: var(--sz-11);
}
.fs-10 {
    font-size: var(--sz-10);
}
.fs-9 {
    font-size: var(--sz-9);
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .fs-xl-72 {
        font-size: var(--sz-72);
    }
    .fs-xl-56 {
        font-size: var(--sz-56);
    }
    .fs-xl-48 {
        font-size: var(--sz-48);
    }
    .fs-xl-40 {
        font-size: var(--sz-40);
    }
    .fs-xl-32 {
        font-size: var(--sz-32);
    }
    .fs-xl-28 {
        font-size: var(--sz-28);
    }
    .fs-xl-24 {
        font-size: var(--sz-24);
    }
    .fs-xl-20 {
        font-size: var(--sz-20);
    }
    .fs-xl-18 {
        font-size: var(--sz-18);
    }
    .fs-xl-16 {
        font-size: var(--sz-16);
    }
    .fs-xl-15 {
        font-size: var(--sz-15);
    }
    .fs-xl-14 {
        font-size: var(--sz-14);
    }
    .fs-xl-13 {
        font-size: var(--sz-13);
    }
    .fs-xl-12 {
        font-size: var(--sz-12);
    }
    .fs-xl-11 {
        font-size: var(--sz-11);
    }
    .fs-xl-10 {
        font-size: var(--sz-10);
    }
    .fs-xl-9 {
        font-size: var(--sz-9);
    }
}


.fc-white {
    /* #FFFFFF */
    color: var(--white) !important;
}
.fc-gray-5 {
    /* #FBFBFB */
    color: var(--gray-5) !important;
}
.fc-gray-10 {
    /* #E8E8E8 */
    color: var(--gray-10) !important;
}
.fc-gray-20 {
    /* #D2D2D2 */
    color: var(--gray-20) !important;
}
.fc-gray-30 {
    /* #BBBBBB */
    color: var(--gray-30) !important;
}
.fc-gray-40 {
    /* #A5A5A5 */
    color: var(--gray-40) !important;
}
.fc-gray-50 {
    /* #8E8E8E */
    color: var(--gray-50) !important;
}
.fc-gray-60 {
    /* #787878 */
    color: var(--gray-60) !important;
}
.fc-gray-70 {
    /* #616161 */
    color: var(--gray-70) !important;
}
.fc-gray-80 {
    /* #4B4B4B */
    color: var(--gray-80) !important;
}
.fc-gray-90 {
    /* #343434 */
    color: var(--gray-90) !important;
}
.fc-gray-100 {
    /* #1E1E1E */
    color: var(--gray-100) !important;
}


.fc-orange-5 {
    /* #FFF7F2 */
    color: var(--orange-5);
}
.fc-orange-10 {
    /* #FFEFE5 */
    color: var(--orange-10);
}
.fc-orange-20 {
    /* #FFE0CC */
    color: var(--orange-20);
}
.fc-orange-30 {
    /* #FFD0B2 */
    color: var(--orange-30);
}
.fc-orange-40 {
    /* #FFC099 */
    color: var(--orange-40);
}
.fc-orange-50 {
    /* #FFB07F */
    color: var(--orange-50);
}
.fc-orange-60 {
    /* #FFA166 */
    color: var(--orange-60);
}
.fc-orange-70 {
    /* #FF914C */
    color: var(--orange-70);
}
.fc-orange-80 {
    /* #FF8133 */
    color: var(--orange-80);
}
.fc-orange-90 {
    /* #FF7119 */
    color: var(--orange-90);
}
.fc-orange-100 {
    /* #FF6200 */
    color: var(--orange-100);
}


.fc-red-100 {
    /* #FB330B */
    color: var(--red-100);
}
/* ------------------------- Typo : End ------------------------- */




/* ------------------------- Link : Start ------------------------- */
.link-primary {
    color: var(--gray-100) !important;
    text-decoration: none !important;
}
.link-primary:hover,
.link-primary:focus {
    color: var(--orange-100) !important;
    text-decoration: none !important;
}
.link-body-emphasis {
    text-decoration: underline;
}
.link-underline-opacity-0 {
    text-decoration: none !important;
}
/* ------------------------- Link : End ------------------------- */



/* ------------------------- Border : Start ------------------------- */
.bc-white {
    /* #FFFFFF */
    border-color: var(--white) !important;
}
.bc-gray-5 {
    /* #FBFBFB */
    border-color: var(--gray-5) !important;
}
.bc-gray-10 {
    /* #E8E8E8 */
    border-color: var(--gray-10) !important;
}
.bc-gray-20 {
    /* #D2D2D2 */
    border-color: var(--gray-20) !important;
}
.bc-gray-30 {
    /* #BBBBBB */
    border-color: var(--gray-30) !important;
}
.bc-gray-40 {
    /* #A5A5A5 */
    border-color: var(--gray-40) !important;
}
.bc-gray-50 {
    /* #8E8E8E */
    border-color: var(--gray-50) !important;
}
.bc-gray-60 {
    /* #787878 */
    border-color: var(--gray-60) !important;
}
.bc-gray-70 {
    /* #616161 */
    border-color: var(--gray-70) !important;
}
.bc-gray-80 {
    /* #4B4B4B */
    border-color: var(--gray-80) !important;
}
.bc-gray-90 {
    /* #343434 */
    border-color: var(--gray-90) !important;
}
.bc-gray-100 {
    /* #1E1E1E */
    border-color: var(--gray-100) !important;
}


.bc-orange-5 {
    /* #FFF7F2 */
    border-color: var(--orange-5) !important;
}
.bc-orange-10 {
    /* #FFEFE5 */
    border-color: var(--orange-10) !important;
}
.bc-orange-20 {
    /* #FFE0CC */
    border-color: var(--orange-20) !important;
}
.bc-orange-30 {
    /* #FFD0B2 */
    border-color: var(--orange-30) !important;
}
.bc-orange-40 {
    /* #FFC099 */
    border-color: var(--orange-40) !important;
}
.bc-orange-50 {
    /* #FFB07F */
    border-color: var(--orange-50) !important;
}
.bc-orange-60 {
    /* #FFA166 */
    border-color: var(--orange-60) !important;
}
.bc-orange-70 {
    /* #FF914C */
    border-color: var(--orange-70) !important;
}
.bc-orange-80 {
    /* #FF8133 */
    border-color: var(--orange-80) !important;
}
.bc-orange-90 {
    /* #FF7119 */
    border-color: var(--orange-90) !important;
}
.bc-orange-100 {
    /* #FF6200 */
    border-color: var(--orange-100) !important;
}


.bc-red-100 {
    /* #FB330B */
    border-color: var(--red-100) !important;
}


.border-0 {
    border: 0 !important;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .border-xl-0 {
        border: 0 !important;
    }
}
/* ------------------------- Border : End ------------------------- */





/* ------------------------- BG : Start ------------------------- */
.bg-white {
    background-color: var(--white) !important;
}


.bg-gray-5 {
    background-color: var(--gray-5) !important;
}
.bg-gray-10 {
    background-color: var(--gray-10) !important;
}
.bg-gray-20 {
    background-color: var(--gray-20) !important;
}
.bg-gray-70 {
    background-color: var(--gray-70) !important;
}
.bg-gray-100 {
    background-color: var(--gray-100) !important;
}


.bg-orange-5 {
    background-color: var(--orange-5) !important;
}
.bg-orange-10 {
    background-color: var(--orange-10) !important;
}
.bg-orange-70 {
    background-color: var(--orange-70) !important;
}
.bg-orange-100 {
    background-color: var(--orange-100) !important;
}


div[class*="bg"] .card,
div[class*="bg"] .list-group,
div[class*="bg"] .list-group-item {
    background-color: transparent !important;
}
/* ------------------------- BG : End ------------------------- */





/* ------------------------- Ico : Start ------------------------- */
.ico {
    display: inline-block;
    width: var(--sz-20);
    height: var(--sz-20);
    /* background-color: rgba(244, 91, 91, 0.2); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    vertical-align: middle;
}
.ico-cube {
    background-image: url(/openads3/images/ico-cube-default-24px.svg);
}
.ico-search {
    background-image: url(/openads3/images/ico-search-default-32px.svg);
}
.ico-bell {
    background-image: url(/openads3/images/ico-bell-default-24px@3x.png);
}


.ico-chevron-left {
    background-image: url(/openads3/images/ico-chevron-left-gray-default-24px.svg);
}
.ico-chevron-right {
    background-image: url(/openads3/images/ico-chevron-right-gray-default-24px.svg);
}
.ico-chevron-top,
.ico-chevron-bottom {
    background-image: url(/openads3/images/ico-chevron-bottom-gray-default-24px.svg);
}
.ico-chevron-top {
    transform: rotate(180deg);
}
.ico-chevron-right.gray {
    width: var(--sz-8);
    height: var(--sz-16);
    background-image: url(/openads3/images/ico-chevron-right-gray-disabled-24px.svg);
    background-size: var(--sz-24);
}


.ico-caret-left,
.ico-caret-right {
    background-image: url(/openads3/images/ico-caret-right-default-20px.svg);
}
.ico-caret-top,
.ico-caret-bottom {
    background-image: url(/openads3/images/ico-caret-bottom-default-20px.svg);
}
.ico-caret-left,
.ico-caret-top {
    transform: rotate(180deg);
}


.ico-bookmark {
    background-image: url(/openads3/images/ico-bookmark-default-24px.svg);
}
.bg-gray-100 .ico-bookmark,
.card.overlay .ico-bookmark {
    background-image: url(/openads3/images/ico-bookmark-default-white-20px.svg);
}
.btn.active .ico-bookmark {
    background-image: url(/openads3/images/ico-bookmark-active-24px.svg);
}
.ico-view {
    background-image: url(/openads3/images/ico-view-default-24px.svg);
}
.bg-gray-100 .ico-view,
.card.overlay .ico-view {
    background-image: url(/openads3/images/ico-view-default-white-20px.svg);
}
.ico-favorite {
    background-image: url(/openads3/images/ico-favorite-default-24px.svg);
}
.bg-gray-100 .ico-favorite,
.card.overlay .ico-favorite {
    background-image: url(/openads3/images/ico-favorite-default-white-20px.svg);
}
.btn.active .ico-favorite {
    background-image: url(/openads3/images/ico-favorite-active-24px.svg);
}
.ico-share {
    background-image: url(/openads3/images/ico-share-default-24px.svg);
}
.bg-gray-100 .ico-share,
.card.overlay .ico-share {
    background-image: url(/openads3/images/ico-share-default-white-20px.svg);
}
.ico-comment {
    background-image: url(/openads3/images/ico-comment-default-24px.svg);
}
.ico-link {
    background-image: url(/openads3/images/ico-link-default-24px.svg);
}
.ico-filter {
    background-image: url(/openads3/images/ico-filter-default-20px.svg);
}
.ico-copy {
    background-image: url(/openads3/images/ico-copy-gray-default-24px.svg);
}
.ico-file {
    background-image: url(/openads3/images/ico-file-gray-default-24px.svg);
}



.ico-arrow-top {
    width: var(--sz-16);
    height: var(--sz-16);
    background-image: url(/openads3/images/ico-arrow-top-default-16px.svg);
}
.ico-arrow-right {
    width: var(--sz-16);
    height: var(--sz-16);
    background-image: url(/openads3/images/ico-arrow-top-default-16px.svg);
    transform: rotate(90deg);
}


.ico-plus {
    background-image: url(/openads3/images/ico-plus-default-16px.svg);
}


.ico-paper {
    background-image: url(/openads3/images/ico-paper-orange-56px.svg);
}
.ico-user {
    background-image: url(/openads3/images/ico-user-orange-56px.svg);
}
.ico-column {
    background-image: url(/openads3/images/ico-column-orange-56px.svg);
}
.ico-book {
    background-image: url(/openads3/images/ico-book-orange-56px.svg);
}
.ico-eye {
    background-image: url(/openads3/images/ico-eye-24px.svg);
}
.ico-eye-slash {
    background-image: url(/openads3/images/ico-eye-slash-24px.svg);
}
.ico-reloading {
    background-image: url(/openads3/images/ico-reloading-20px.svg);
}
.ico-calendar {
    background-image: url(/openads3/images/ico-calendar-orange-default-12px.svg);
}

.ico-tooltip {
    width: var(--sz-15);
    height: var(--sz-15);
    background-image: url(/openads3/images/ico-tooltip-default-12px.svg);
}
.ico-txt-essential {
    width: 6px;
    height: 6px;
    background-image: url(/openads3/images/ico-txt-essential-6px.svg);
}
.openads-logo-web {
    background-image: url(/openads3/images/openads-logo-web.svg);
}


.logo-naver {
    background-image: url(/openads3/images/logo-naver-32px.svg);
}
.logo-kakao {
    background-image: url(/openads3/images/logo-kakao-32px.svg);
}
.logo-payco {
    background-image: url(/openads3/images/logo-payco-32px.svg);
}
.logo-google {
    background-image: url(/openads3/images/logo-google-32px.svg);
}
.ico-mail {
    background-image: url(/openads3/images/ico-mail-32px.svg);
}


.logo-share-facebook {
    background-image: url(/openads3/images/logo-share-facebook-52px.svg);
}
.logo-share-x {
    background-image: url(/openads3/images/logo-share-x-52px.svg);
}
.logo-share-kakaotalk {
    background-image: url(/openads3/images/logo-share-kakaotalk-52px.svg);
}
.logo-share-naver {
    background-image: url(/openads3/images/logo-share-naver-52px.svg);
}


.ico-more-dot {
    background-image: url(/openads3/images/ico-more-dot-default-32px.svg);
}


.ico-download-white {
    background-image: url(/openads3/images/ico-download-white-16px.svg);
}


.dot {
    display: inline-block;
    width: 2px;
    height: 2px;
    margin-top: var(--sz-12);
    background-color: var(--gray-100);
    border-radius: 50%;
    vertical-align: middle;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .dot {
        margin-top: var(--sz-14);
    }
}
/* ------------------------- Ico : End ------------------------- */





/* ------------------------- Thumb : Start ------------------------- */
.img-cover {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.rounded-circle img {
    border-radius: 50%;
}
.img-thumbnail {
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
}
.img-fluid {
    width: 100%;
    height: 100%;
}
/* ------------------------- Thumb : Start ------------------------- */





/* ------------------------- Badge : Start ------------------------- */
.badge:empty {
    display: block;
}
.badge.dot {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    width: 4px;
    height: 4px;
    margin-top: 0;
    background-color: var(--orange-100);
    border-radius: 50%;
}
.badge-now {
    position: relative;
    padding-bottom: var(--sz-10);
}
.badge-now::after {
    content: '';
    position: absolute;
    left: calc(var(--sz-10) * -1);
    bottom: 0;
    width: var(--sz-48);
    height: var(--sz-48);
    background: url(/openads3/images/badge-now-80px@3x.png) no-repeat center / 100%;
}
.badge-text {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 1.625rem;
    padding: 0 var(--sz-8);
    border-radius: 0;
    vertical-align: middle;
}
.badge-text.round {
    border-radius: var(--sz-16);
}
.badge-text.circle {
    border-radius: 50%;
}
.badge-text .vr {
    align-self: center;
    background-color: var(--orange-50);
    opacity: 1;
}


.badge-text.badge-sm {
    height: 1.125rem;
    padding: 0 var(--sz-4);
}
.badge-text.badge-lg {
    height: var(--sz-32);
}
.badge-text.round.badge-lg {
    min-width: var(--sz-32);
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .badge.dot {
        width: 6px;
        height: 6px;
    }
    .badge-now {
        padding-bottom: var(--sz-16);
    }
    .badge-now::after {
        left: calc(var(--sz-16) * -1);
        width: var(--sz-80);
        height: var(--sz-80);
    }
}
/* ------------------------- Badge : End ------------------------- */





/* ------------------------- Tag : Start ------------------------- */
.tag {
    display: flex;
    align-items: center;
    gap: var(--sz-4);
    padding: var(--sz-8);
    border: 1px solid var(--gray-20);
}
a.tag:hover {
    border: 1px solid var(--gray-100);
    font-weight: 700;
    background-color: var(--gray-100);
    color: var(--white) !important;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    a.tag {
        padding: var(--sz-10) var(--sz-16);
    }
}
/* ------------------------- Tag : End ------------------------- */





/* ------------------------- Input : Start ------------------------- */
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-floating:focus-within {
    z-index: 0;
}
.form-control:disabled {
    background-color: var(--white);
    opacity: 0.6;
}
input[type="text"]::placeholder,
.form-control::placeholder {
    color: var(--gray-20);
}
.form-control[type="number"]::-webkit-outer-spin-button,
.form-control[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.input-group .box-right .fc-gray-30 {
    position: absolute;
    top: var(--sz-8);
    right: 0;
}
.input-group .box-right .btn {
    margin-top: var(--sz-8);
}
.input-group .box-right .btn.btn-password {
    position: absolute;
    top: 2px;
    right: 0;
    margin-top: 0;
}
.input-group .box-right .btn.btn-password:active {
    border-color: transparent;
}
.input-group .box-right .btn-link,
.input-group .box-right .fc-gray-30 {
    position: absolute;
    top: var(--sz-8);
    right: 0;
}
.input-group .box-right .btn-link {
    top: 0;
    bottom: auto;
    margin-top: 0;
}
.input-group .box-right .form-check {
    padding-top: var(--sz-16);
}
.input-group .box-recommend {
    margin-top: var(--sz-12);
}
.input-group .box-recommend a {
    padding: var(--sz-6) var(--sz-14);
    background-color: #F9F8F8;
    border-radius: var(--sz-15);
}


.form-label {
    display: flex;
    align-items: center;
    gap: var(--sz-4);
    margin-bottom: var(--sz-4);
}


.form-control {
    padding: var(--sz-8) 0;
    border: 0;
    border-bottom: var(--sz-1) solid var(--gray-10);
    font-size: var(--sz-16);
    font-weight: 700;
    line-height: 1.6;
    color: var(--gray-100);
    border-radius: 0;
}
.form-control.form-confirm-count,
.form-control.form-send-count {
    padding-right: 3.4375rem;
}
.form-control.form-password {
    padding-right: 2.75rem;
}
.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--gray-100);
    outline: 0;
    box-shadow: none;
}
.form-control::placeholder {
    color: var(--gray-20);
    opacity: 1;
}
.form-control.is-invalid,
.form-control.is-valid {
    background-image: none;
}
.form-control.is-invalid:focus,
.form-control.is-valid:focus {
    box-shadow: none;
}
.input-group .form-control:not(:focus).is-invalid,
.input-group .form-control:not(:focus).is-valid {
    z-index: auto;
}
.form-control.is-valid {
    border-color: var(--gray-10);
}
.form-control.is-valid:focus {
    border-color: var(--gray-100);
}
.form-control.is-invalid:focus,
.form-control.is-invalid {
    border-color: #FB330B;
}
.invalid-feedback,
.valid-feedback {
    margin-top: var(--sz-8);
    font-size: var(--sz-11);
}
.valid-feedback {
    color: #21B275;
}
.invalid-feedback {
    color: #FB330B;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .input-group .box-right .btn-link,
    .input-group .box-right .fc-gray-30 {
        position: static;
    }
    .input-group .box-right .form-check {
        padding-top: 0;
    }


    .input-group .box-right {
        display: flex;
        align-items: center;
        gap: var(--sz-12);
        position: absolute;
        right: 0;
        margin-top: var(--sz-14);
    }
    .input-group .box-right .btn,
    .input-group .box-right .fc-gray-30 {
        margin-top: 0;
    }
    .input-group .box-right .btn.btn-password {
        top: -0.31rem;
    }


    .form-control {
        padding: var(--sz-12) 0;
        font-size: var(--sz-24);
        line-height: 1.4;
    }
    .form-control.form-send {
        padding-right: 7.75rem;
    }
    .form-control.form-send-count {
        padding-right: 11rem;
    }
    .form-control.form-confirm {
        padding-right: 5.25rem;
    }
    .form-control.form-confirm-count {
        padding-right: 8.5rem;
    }


    .invalid-feedback,
    .valid-feedback {
        font-size: var(--sz-12);
    }
}
/* ------------------------- Input : End ------------------------- */




/* ------------------------- Textarea : Start ------------------------- */
textarea.form-control {
    min-height: 5.625rem;
    padding: var(--sz-12);
    border: 1px solid var(--gray-20);
    font-weight: 400;
    font-size: var(--sz-14);
    resize: none;
}
textarea.form-control:focus {
    border: 1px solid var(--gray-100);
}


textarea.form-control.black {
    border: 1px solid var(--gray-100);
}


/* Size : Start */
textarea.form-control.large {
    min-height: 15rem;
    font-size: var(--sz-14);
}
/* Size : Start */


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    textarea.form-control {
        min-height: 5rem;
    }

    /* Size : Start */
    textarea.form-control.large {
        font-size: var(--sz-16);
    }
    /* Size : Start */
}
/* ------------------------- Textarea : End ------------------------- */




/* ------------------------- Button : Start ------------------------- */
.btn {
    --bs-btn-padding-x: var(--sz-12);
    --bs-btn-padding-y: var(--sz-6);
    --bs-btn-font-size: var(--sz-13);
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 0;
    display: inline-flex;
    gap: var(--sz-4);
    justify-content: center;
    align-items: center;
}
.btn-ico {
    padding: 0;
    border: 0;
}
.icon-link {
    --bs-link-color-rgb: var(--gray-100);
    --bs-link-color: var(--gray-100);
    gap: 0;
}
.btn-close {
    width: var(--sz-16);
    height: var(--sz-16);
    padding: 0;
    background-image: url(/openads3/images/ico-close-default-16px.svg);
    background-size: 100%;
}
.btn-close:focus {
    box-shadow: none;
}
.btn:disabled {
    opacity: 0.2;
}


/* orange solid */
.btn-primary {
    --bs-btn-color: #FFF;
    --bs-btn-bg: #FF6200;
    --bs-btn-border-color: #FF6200;

    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: #FF6200;
    --bs-btn-hover-border-color: #FF6200;

    --bs-btn-focus-shadow-rgb: none;

    --bs-btn-active-color: #FFF;
    --bs-btn-active-bg: #FF6200;
    --bs-btn-active-border-color: #FF6200;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: #FFF;
    --bs-btn-disabled-bg: #FF6200;
    --bs-btn-disabled-border-color: #FF6200;
}


/* black solid */
.btn-secondary {
    --bs-btn-color: #FFF;
    --bs-btn-bg: #1E1E1E;
    --bs-btn-border-color: #1E1E1E;

    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: #1E1E1E;
    --bs-btn-hover-border-color: #1E1E1E;

    --bs-btn-focus-shadow-rgb: none;

    --bs-btn-active-color: #FFF;
    --bs-btn-active-bg: #1E1E1E;
    --bs-btn-active-border-color: #1E1E1E;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: #FFF;
    --bs-btn-disabled-bg: #1E1E1E;
    --bs-btn-disabled-border-color: #1E1E1E;
}


/* orange outline */
.btn-outline-primary {
    --bs-btn-color: #FF6200;
    --bs-btn-border-color: #FF6200;

    --bs-btn-hover-color: #FF6200;
    --bs-btn-hover-bg: none;
    --bs-btn-hover-border-color: #FF6200;

    --bs-btn-focus-shadow-rgb: 13, 110, 253;

    --bs-btn-active-color: #FF6200;
    --bs-btn-active-bg: #FFF;
    --bs-btn-active-border-color: #FF6200;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: #FF6200;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #FF6200;
    --bs-gradient: none;
}


/* black outline */
.btn-outline-secondary {
    --bs-btn-color: #1E1E1E;
    --bs-btn-border-color: #1E1E1E;

    --bs-btn-hover-color: #1E1E1E;
    --bs-btn-hover-bg: none;
    --bs-btn-hover-border-color: #1E1E1E;

    --bs-btn-focus-shadow-rgb: 108, 117, 125;

    --bs-btn-active-color: #1E1E1E;
    --bs-btn-active-bg: none;
    --bs-btn-active-border-color: #1E1E1E;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: #1E1E1E;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #1E1E1E;
    --bs-gradient: none;
}


.btn[class*="btn-outline-"].border-0 {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
}
.btn[class*="btn-outline-"].border-0[class*="h-"] {
    min-width: auto;
    font-size: var(--sz-16);
    font-weight: 500;
}


.btn-group,
.btn-group > .btn, .btn-group-vertical > .btn {
    border-radius: 0;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .btn {
        --bs-btn-padding-x: var(--sz-16);
        --bs-btn-padding-y: 0.44rem;
        --bs-btn-font-size: var(--sz-16);
        gap: var(--sz-8);
    }
}


/***** Button Height : Start *****/
.h-32 {
    height: var(--sz-32);
}
.h-40 {
    height: var(--sz-40);
}
.h-48 {
    height: var(--sz-48);
}
.h-56 {
    height: var(--sz-56);
}

.btn.h-32 {
    min-width: var(--sz-64);
    font-size: var(--sz-13);
}
.btn.h-40 {
    min-width: var(--sz-80);
    font-size: var(--sz-13);
}
.btn.h-48 {
    min-width: 7.5rem;
    font-size: var(--sz-16);
}
.btn.h-56  {
    min-width: 7.5rem;
    font-size: var(--sz-20);
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .h-xl-32 {
        height: var(--sz-32);
    }
    .h-xl-40 {
        height: var(--sz-40);
    }
    .h-xl-48 {
        height: var(--sz-48);
    }
    .h-xl-56 {
        height: var(--sz-56);
    }
    .h-xl-60 {
        height: var(--sz-60);
    }

    .btn.h-xl-32 {
        min-width: var(--sz-64);
        font-size: var(--sz-13);
    }
    .btn.h-xl-40 {
        min-width: var(--sz-80);
        font-size: var(--sz-13);
    }
    .btn.h-xl-48 {
        min-width: 7.5rem;
        font-size: var(--sz-16);
    }
    .btn.h-xl-56  {
        min-width: 7.5rem;
        font-size: var(--sz-20);
    }
    .btn.h-xl-60  {
        font-size: var(--sz-20);
    }
}
/***** Button Height : End *****/
/* ------------------------- Button : End ------------------------- */





/* ------------------------- CheckBox : Start ------------------------- */
.form-group {
    column-gap: var(--sz-20);
    row-gap: var(--sz-8);
}
.form-check {
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 0;
    min-height: 0;
}
.form-check .form-check-input {
    float: none;
    margin-top: 0;
    margin-left: 0;
    border: none;
    cursor: pointer;
}
.form-check .form-check-input:focus {
    box-shadow: none;
}
.form-check-input:active {
    filter: none;
}
.form-check .form-check-input + .form-check-label {
    cursor: pointer;
}


.form-check .form-check-input[type="checkbox"] {
    background: url(/openads3/images/ico-checkbox-default-24px.svg) no-repeat center / 100%;
}
.form-check .form-check-input[type="checkbox"]:checked {
    background-color: transparent;
    background: url(/openads3/images/ico-checkbox-active-24px.svg) no-repeat center / 100%;
}
.form-check .form-check-input[type="checkbox"]:checked + .form-check-label {
    color: var(--gray-100);
}
.form-check .form-check-input[type="checkbox"] + .form-check-label {
    color: var(--gray-30);
}


.form-check.orange .form-check-input[type="checkbox"]:checked {
    background: url(/openads3/images/ico-checkbox-active-orange-24px.svg) no-repeat center / 100%;
}


.form-check.outline {
    position: relative;
    padding: var(--sz-4) var(--sz-12) var(--sz-4) var(--sz-8);
}
.form-check.outline .form-check-input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--gray-10);
}
.form-check.outline .form-check-input[type="checkbox"]:checked::before {
    border: 1px solid var(--gray-100);
}


.form-check.square {
    flex-basis: calc(50% - var(--sz-10));
    white-space: nowrap;
}


.form-check.square .form-check-input[type="checkbox"] {
    background: url(/openads3/images/ico-checkbox-square-default-24px.svg) no-repeat center / 100%;
    border-radius: 0;
}
.form-check.square .form-check-input[type="checkbox"]:checked {
    background: url(/openads3/images/ico-checkbox-square-active-24px.svg) no-repeat center / 100%;
}
.form-check.square .form-check-input[type="checkbox"] + .form-check-label {
    color: var(--gray-100);
}


.form-check.circle .form-check-input[type="checkbox"] {
    background: url(/openads3/images/ico-checkbox-circle-default-32px.svg) no-repeat center / 100%;
    border-radius: 50%;
}
.form-check.circle .form-check-input[type="checkbox"]:checked {
    background: url(/openads3/images/ico-checkbox-circle-active-32px.svg) no-repeat center / 100%;
}



/* Disabled : Start */
.form-check.disabled .form-check-label {
    color: var(--gray-20) !important;
}
/* Disabled : End */



/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .form-group {
        column-gap: var(--sz-24);
        row-gap: var(--sz-12);
    }


    .form-check.outline {
        padding: var(--sz-8) var(--sz-16) var(--sz-8) var(--sz-12);
    }


    .form-check.square {
        flex-basis: calc(100% / 7 - var(--sz-16));
    }
}
/* ------------------------- CheckBox : End ------------------------- */





/* ------------------------- Switch : Start ------------------------- */
.form-check.form-switch .form-check-input[type="checkbox"] {
    margin-left: 0;
    width: var(--sz-36);
    height: var(--sz-20);
    border: none;
    background: var(--gray-20) url(/openads3/images/bg-switch-18px.svg) no-repeat var(--sz-2) center / var(--sz-16);
}
.form-check.form-switch .form-check-input[type="checkbox"]:checked {
    background-color: var(--orange-100);
    background-position: right 0.13rem center;
}
.form-check.form-switch.black .form-check-input[type="checkbox"]:checked {
    background-color: var(--gray-100);
}


.form-check.form-switch .form-check-label {
    cursor: default;
}


/* Disabled : Start */
.form-check.form-switch.disabled .form-check-input[type="checkbox"] {
    background-color: var(--gray-10);
}
/* Disabled : End */


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .form-check.form-switch .form-check-input[type="checkbox"] {
        width: 2.75rem;
        height: var(--sz-24);
        background-position: 0.1875rem center;
        background-size: 1.125rem;
    }
    .form-check.form-switch .form-check-input[type="checkbox"]:checked {
        background-position: right 0.1875rem center;
    }
}
/* ------------------------- Switch : End ------------------------- */





/* ------------------------- Radio : Start ------------------------- */
.form-check.radio {
    flex-basis: calc(50% - var(--sz-10));
}


.form-check .form-check-input[type="radio"] {
    width: var(--sz-24);
    height: var(--sz-24);
    border: 1px solid var(--gray-20);
}
.form-check-input:checked[type="radio"] {
    border-color: var(--orange-100);
    background-color: var(--white);
    background-image: url(/openads3/images/bg-radio-checked-16px.svg);
    background-position: center;
    background-size: var(--sz-16);
}


.radio-tab-group .tab-list {
    padding: var(--sz-8) 0;
}
.radio-tab-group .tab-content {
    margin-top: var(--sz-8);
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .form-check.radio {
        flex-basis: calc(100% / 5 - var(--sz-20));
    }
}
/* ------------------------- Radio : End ------------------------- */





/* ------------------------- SelectBox : Start ------------------------- */
/********** Form-Select : Start **********/
.form-select {
    height: var(--sz-48) !important;
    padding: var(--sz-12) var(--sz-32) var(--sz-12) 0;
    border: 0;
    border-bottom: var(--sz-1) solid var(--gray-20);
    font-size: var(--sz-14);
    font-weight: 500;
    line-height: 1.6;
    border-radius: 0;
    background: url(/openads3/images/ico-chevron-bottom-gray-default-24px.svg) no-repeat 100% 50% / var(--sz-24);
    color: var(--gray-100);
    gap: 0 !important;
}
.bg-gray-100 .form-select {
    background: url(/openads3/images/ico-chevron-bottom-white-default-24px.svg) no-repeat 100% 50% / var(--sz-24);
    color: var(--white);
}
.form-select.arrow-caret {
    margin-bottom: var(--sz-32);
}


/* Size : Start */
.form-select.large {
    font-weight: 700;
    font-size: var(--sz-16);
    border-bottom: var(--sz-1) solid var(--gray-10);
}
/* Size : End */


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .form-select.arrow-caret {
        width: auto;
        min-width: auto;
        height: var(--sz-40);
        padding: var(--sz-8) var(--sz-32) var(--sz-8) 0;
        padding-right: var(--sz-28);
        margin-bottom: 0;
        border-width: 2px;
        font-size: var(--sz-28);
        font-weight: bold;
        background: url(/openads3/images/ico-caret-bottom-default-20px.svg) no-repeat 100% 50% / var(--sz-20);
    }


    /* Size : Start */
    .form-select.large {
        font-size: var(--sz-24);
    }
    /* Size : End */
}
/********** Form-Select : End **********/





/********** Use-Bootstrap-Select : Start **********/
.use-bootstrap-select-target {
    position: fixed;
    left: -9999rem;
    top: -9999rem;
}
.use-bootstrap-select {
    cursor: default;
}
.use-bootstrap-select .input-wrapper {
    position: absolute;
    min-width: 4px;
    flex-grow: 1;
    white-space: nowrap;
}
.use-bootstrap-select .input-wrapper > span {
    visibility: hidden;
}
.use-bootstrap-select input[type="text"] {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    outline: 0;
    border: 0;
    width: 100%;
    background-color: transparent;
    cursor: default;
}
.use-bootstrap-select input[type="text"]::placeholder {
    font-weight: 700;
}
.use-bootstrap-select .optgroup-item {
    padding-left: calc(var(--bs-dropdown-item-padding-x) * 2)
}
.use-bootstrap-select > div > div > .btn {
    border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
    overflow-wrap: anywhere;
    cursor: default;
}
.use-bootstrap-select > div > div > .btn.btn-sm {
    border-radius: calc(var(--bs-border-radius-sm) - var(--bs-border-width));
}
.use-bootstrap-select > div > div > .btn.btn-lg {
    border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
}
.use-bootstrap-select .form-select.focus {
    border-bottom: var(--sz-1) solid var(--gray-100);
}
.bg-gray-100 .use-bootstrap-select .form-select.focus {
    border-bottom: var(--sz-1) solid var(--gray-70);
}
.arrow-caret + .use-bootstrap-select-wrapper .use-bootstrap-select .form-select.focus {
    border-bottom: var(--sz-2) solid var(--gray-100);
}
.use-bootstrap-select .form-select.disabled {
    background-color: var(--bs-secondary-bg);
}
.use-bootstrap-select .dropdown-item {
    padding: var(--sz-12) var(--sz-8);
    border-bottom: 1px solid var(--gray-10);
    font-size: var(--sz-14);
    font-weight: 500;
    line-height: 1.6;
    white-space: normal;
    cursor: pointer;
}
.use-bootstrap-select .dropdown-item:last-child,
.arrow-caret + .use-bootstrap-select-wrapper .use-bootstrap-select .dropdown-item {
    border-bottom: none;
}
.use-bootstrap-select .dropdown-item.selected,
.use-bootstrap-select .dropdown-item.active,
.use-bootstrap-select .dropdown-item:active {
    background-color: var(--gray-5);
    color: var(--gray-100);
}
.use-bootstrap-select > .dropdown-menu {
    overflow-y: auto;
    top: calc(100% - var(--sz-4));
    padding: 0;
    border: var(--sz-1) solid var(--gray-100);
    border-radius: 0;
}
.was-validated .form-select:valid + .use-bootstrap-select-wrapper .form-select,
.form-select.is-valid + .use-bootstrap-select-wrapper .form-select {
    border-color: var(--bs-form-valid-border-color);
}
.was-validated .form-select:valid + .use-bootstrap-select-wrapper .form-select:not([multiple]):not([size]),
.was-validated .form-select:valid + .use-bootstrap-select-wrapper .form-select:not([multiple])[size="1"],
.form-select.is-valid + .use-bootstrap-select-wrapper .form-select:not([multiple]):not([size]),
.form-select.is-valid + .use-bootstrap-select-wrapper .form-select:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    padding-right: 4.125rem;
    background-position: right .75rem center,center right 2.25rem;
    background-size: 16px 12px,calc(.75em + .375rem) calc(.75em + .375rem);
}
.was-validated .form-select:valid + .use-bootstrap-select-wrapper .form-select.focus,
.form-select.is-valid + .use-bootstrap-select-wrapper .form-select.focus {
    border-color: var(--bs-form-valid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb),.25);
}
.was-validated .form-select:invalid + .use-bootstrap-select-wrapper .form-select,
.form-select.is-invalid + .use-bootstrap-select-wrapper .form-select {
    border-color: var(--bs-form-invalid-border-color);
}
.was-validated .form-select:invalid + .use-bootstrap-select-wrapper .form-select:not([multiple]):not([size]),
.was-validated .form-select:invalid + .use-bootstrap-select-wrapper .form-select:not([multiple])[size="1"],
.form-select.is-invalid + .use-bootstrap-select-wrapper .form-select:not([multiple]):not([size]),
.form-select.is-invalid + .use-bootstrap-select-wrapper .form-select:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    padding-right: 4.125rem;
    background-position: right .75rem center,center right 2.25rem;
    background-size: 16px 12px,calc(.75em + .375rem) calc(.75em + .375rem);
}
.was-validated .form-select:invalid + .use-bootstrap-select-wrapper .form-select.focus,
.form-select.is-invalid + .use-bootstrap-select-wrapper .form-select.focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb),.25);
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .use-bootstrap-select-target[class*="xl-none"] + .use-bootstrap-select-wrapper {
        display: none;
    }


    .arrow-caret + .use-bootstrap-select-wrapper .use-bootstrap-select .dropdown-menu {
        top: calc(100% + var(--sz-4));
        border: none;
    }
    .arrow-caret + .use-bootstrap-select-wrapper .use-bootstrap-select .dropdown-item {
        padding: var(--sz-8);
        font-size: var(--sz-28);
        font-weight: 700;
    }
    .arrow-caret + .use-bootstrap-select-wrapper .use-bootstrap-select .dropdown-item.selected,
    .arrow-caret + .use-bootstrap-select-wrapper .use-bootstrap-select .dropdown-item.active,
    .arrow-caret + .use-bootstrap-select-wrapper .use-bootstrap-select .dropdown-item:active {
        background-color: transparent;
        color: var(--orange-100);
    }
}
/********** Use-Bootstrap-Select : End **********/
/* ------------------------- SelectBox : End ------------------------- */





/* ------------------------- Dropdown : Start ------------------------- */
.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: var(--sz-2);
}
.dropdown-item {
    --bs-dropdown-item-padding-y: var(--sz-6);
    --bs-dropdown-item-padding-x: var(--sz-16);
    display: flex;
    gap: 4px;
    align-items: center;
}
.dropdown-item.active,
.dropdown-item:active {
    font-weight: 700;
    background-color: transparent;
    color: var(--bs-dropdown-link-active-color);
}


.content  .dropdown-toggle::after {
    display: none;
}
.content .dropdown-menu {
    min-width: 5rem;
    padding: 0;
    border: 1px solid var(--gray-100);
    border-radius: 0;
}
.content .dropdown-menu li {
    border-bottom: 1px solid var(--gray-10);
}
.content .dropdown-item {
    --bs-dropdown-item-padding-y: var(--sz-12);
    --bs-dropdown-item-padding-x: var(--sz-12);
    font-size: var(--sz-14);
}
.content .dropdown-item:hover,
.content .dropdown-item:active,
.content .dropdown-item.active {
    font-weight: 700;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .content .dropdown-item {
        font-size: var(--sz-16);
    }
}
/* ------------------------- Dropdown : End ------------------------- */





/* ------------------------- File-List : Start ------------------------- */
.file-list-group {
    display: flex;
    flex-direction: column;
    gap: var(--sz-16);
    padding: var(--sz-12);
    margin-bottom: 0;
    border: 1px solid var(--gray-10);
}
.file-list-group .group {
    align-items: center;
}
.file-list-group .group .fs-14 {
    width: calc(100% - 10rem);
}
.file-list-group .group .btn {
    color: var(--white) !important;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .file-list-group {
        padding: var(--sz-16);
    }
    .file-list-group .group .fs-14 {
        width: calc(100% - 10.75rem);
    }
}
/* ------------------------- File-List : End ------------------------- */





/* ------------------------- Card : Start ------------------------- */
.card {
    --bs-card-bg: transparent;
    width: 100%;
    border-radius: 0;
    border: none;
}
.card.bg-gray-5 {
    padding: var(--sz-20);
}
.card .card-header {
    padding: 0;
    --bs-card-cap-bg: transparent;
    background-color: var(--bs-card-cap-bg);
    border-bottom: none;
    border-radius: 0;
}
.card .card-header .fs-40 {
    line-height: 1;
}
.card .card-header .form-check.position-absolute {
    top: var(--sz-4);
    right: var(--sz-2);
}
.card .card-body {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.card > .row > * > .card-body {
    justify-content: space-between;
    height: 100%;
}
.card .btn-ico {
    z-index: 1;
    margin-left: auto;
}
.card .ico {
    position: relative;
}
.card .ico::after {
    content: "";
    position: absolute;
    top: calc(var(--sz-10) * -1);
    right: calc(var(--sz-10) * -1);
    bottom: calc(var(--sz-10) * -1);
    left: calc(var(--sz-10) * -1);
    z-index: 1;
}
.rank {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: var(--sz-4);
    margin-right: var(--sz-20);
    border: 1px solid var(--gray-100);
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
}
.bg-gray-100 .rank {
    border: 1px solid var(--white);
}
.card .card-img {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    background-color: var(--white);
    /* background-color: yellow; */
    aspect-ratio: 4 / 2.56;
    border-radius: 0;
}
.card .card-img.border {
    /* overflow: visible; */
    aspect-ratio: 4 / 2.17;
}
.card .card-img img {
    background-color: transparent;
    border-radius: 0;
}
.card.overlay .card-img,
.card .card-img[class*="sz-"] {
    aspect-ratio: 1 / 1 !important;
}
.card .card-img.rounded-circle {
    overflow: visible;
}
.card .card-img.rounded-circle img {
    border-radius: 50%;
}
.card .badge-text {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--sz-20);
    border-bottom-right-radius: var(--sz-8);
}
.card .badge-text.round {
    top: auto;
    left: auto;
    right: var(--sz-6);
    bottom: var(--sz-6);
    border-radius: var(--sz-16);
}
.ai .card .card-img .img-thumbnail,
.card.overlay .card-img .img-thumbnail {
    position: absolute;
    top: var(--sz-10);
    right: var(--sz-10);
}
.card-img-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 0;
}
.overlay .stretched-link.text-truncate {
    height: 1.2rem !important;
    -webkit-line-clamp: 1 !important;
}
.card .d-flex.align-items-center.gap-4 > * {
    line-height: 1;
}


.card .fs-xl-14.text-truncate {
    height: 2rem;
    -webkit-line-clamp: 2;
}
.card .group.justify-content-between.align-items-center {
    height: 2rem;
    /* border: 1px solid blue; */
}
.card small.fs-xl-14.text-truncate {
    height: auto;
    max-height: 2rem;
    line-height: 1rem;
    /* border: 1px solid red; */
}


.card .group.gap-8 ~ .group.flex-column.gap-4 .fs-xl-24.text-truncate {
    height: 1.4rem;
    -webkit-line-clamp: 1;
}

/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .card.bg-gray-5 {
        padding: var(--sz-40) var(--sz-32);
    }
    .card .badge-text {
        height: var(--sz-28);
        padding: 0.44rem var(--sz-12);
    }
    .ai .card .card-img .img-thumbnail,
    .card.overlay .card-img .img-thumbnail {
        top: var(--sz-16);
        right: var(--sz-16);
    }
    .overlay:hover .card-img-overlay {
        row-gap: 3.63rem !important;
    }
    .overlay .stretched-link.text-truncate {
        height: 1.6rem !important;
        transition: all 0.3s;
    }
    .overlay:hover .stretched-link.text-truncate {
        height: var(--sz-56) !important;
        font-size: var(--sz-20);
        -webkit-line-clamp: 2 !important;
    }
    .swiper-container .overlay .stretched-link.text-truncate {
        height: 1.63rem !important;
    }
    .swiper-container .overlay:hover .stretched-link.text-truncate {
        height: var(--sz-56) !important;
    }


    .overlay-xl-none {
        flex-direction: row;
        gap: var(--sz-12);
        padding: var(--sz-16) 0;
    }
    .overlay-xl-none .card-img {
        width: var(--sz-80);
    }
    .overlay-xl-none .card-img .img-thumbnail {
        top: var(--sz-4) !important;
        right: var(--sz-4) !important;
    }
    .overlay-xl-none .card-img-overlay {
        justify-content: center;
        position: static;
        width: calc(100% - var(--sz-80));
        padding: 0;
        background: none;
    }
    .overlay-xl-none .card-img-overlay .fc-white {
        font-weight: 500 !important;
        color: var(--gray-100) !important;
    }
    .overlay-xl-none .stretched-link.text-truncate {
        height: auto !important;
        -webkit-line-clamp: 2 !important;
    }
    .overlay-xl-none:hover .stretched-link.text-truncate {
        height: auto !important;
        font-size: var(--sz-16);
        transform: none;
    }
    .overlay-xl-none:hover .card-img-overlay {
        row-gap: var(--sz-8) !important;
    }


    .card .fs-xl-14.text-truncate {
        height: 2.6rem;
    }
    .card .group.justify-content-between.align-items-center {
        height: 2.6rem;
    }
    .card small.fs-xl-14.text-truncate {
        height: auto;
        max-height: 2.6rem;
        line-height: 1.3rem;
    }


    .card .group.gap-8 ~ .group.flex-column.gap-4 .fs-xl-24.text-truncate {
        height: 2.3rem;
    }
}
/* ------------------------- Card : End ------------------------- */




/* ------------------------- Accordion : Start ------------------------- */
.accordion {
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: var(--sz-20);
}
.accordion-item {
    border: none;
}
.accordion-button {
    border-bottom: 1px solid var(--gray-100);
    font-weight: 700;
}
.accordion-button::after {
    width: var(--sz-24);
    height: var(--sz-24);
    background-image: url(/openads3/images/ico-chevron-bottom-gray-default-24px.svg);
    background-position: center;
    background-size: 100%;
}
.accordion-button:not(.collapsed)::after {
    background-image: url(/openads3/images/ico-chevron-bottom-gray-default-24px.svg);
}
.accordion-button:focus {
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
    color: var(--gray-100);
}
.accordion-item:first-of-type > .accordion-header .accordion-button,
.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
    border-radius: 0;
}
.accordion-body {
    padding: var(--sz-16) 0;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .accordion-button::after {
        width: var(--sz-32);
        height: var(--sz-32);
    }
}
/* ------------------------- Accordion : End ------------------------- */




/* ------------------------- Datagrid : Start ------------------------- */
.datagrid .group-footer .use-bootstrap-select .dropdown-item {
    padding: var(--sz-8);
    font-size: var(--sz-14);
}
/* ------------------------- Datagrid : End ------------------------- */





/* ------------------------- Pagination : Start ------------------------- */
.pagination {
    --bs-border-color: var(--gray-100);
    --bs-pagination-padding-x: 0;
    --bs-pagination-padding-y: 0;
    --bs-pagination-border-radius: 0;
    --bs-pagination-disabled-border-color: var(--gray-30);
}
.pagination .page-item.prev .page-link,
.pagination .page-item.next .page-link {
    width: var(--sz-40);
    height: var(--sz-40);
    background: url(/openads3/images/ico-chevron-right-gray-default-24px.svg) no-repeat center / var(--sz-24);
    text-indent: -9999px;
}
.pagination .page-item.prev .page-link {
    background: url(/openads3/images/ico-chevron-left-gray-default-24px.svg) no-repeat center / var(--sz-24);
}
.pagination .page-item.prev.disabled .page-link {
    background: url(/openads3/images/ico-chevron-left-gray-disabled-24px.svg) no-repeat center / var(--sz-24);
}
.pagination .page-item.next.disabled .page-link {
    background: url(/openads3/images/ico-chevron-right-gray-disabled-24px.svg) no-repeat center / var(--sz-24);
}
/* ------------------------- Pagination : End ------------------------- */





/* ------------------------- Modal : Start ------------------------- */
.modal-backdrop {
    background-color: var(--gray-100);
}
.modal-dialog {
    max-width: 21.875rem;
    margin-left: auto;
    margin-right: auto;
}
.modal-content {
    padding: var(--sz-28) var(--sz-32) var(--sz-36);
    border: none;
    border-radius: 0;
}
.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--orange-100);
}
.modal-header {
    padding: 0;
    border-bottom: none;
}
.modal-header .btn-close {
    position: absolute;
    top: var(--sz-12);
    right: var(--sz-8);
    padding: 0;
    margin: 0;
    background-image: url(/openads3/images/ico-modal-close-orange-24px.svg);
    opacity: 1;
}
.modal-header .openads-logo-web {
    width: 10.25rem;
    height: var(--sz-36);
}
.modal-header .divider {
    margin: var(--sz-8) 0;
}
.modal-body {
    padding: var(--sz-16) 0;
}
.modal-footer {
    align-items: flex-start;
    padding: 0;
    padding-top: var(--sz-24);
    border-color: var(--gray-20);
}
.modal-footer > * {
    flex: 1;
    margin: 0;
}


/* 1200px 이상 -- 데스크탑 (xl) */
@media (min-width: 1200px) {
    .modal-dialog {
        max-width: 25rem;
    }
    .modal-dialog.w-xl-600 {
        max-width: 37.5rem;
    }
    .modal-dialog.w-xl-1200 {
        max-width: 75rem;
    }
    .modal-content {
        padding: var(--sz-32) var(--sz-48) var(--sz-40);
    }
    .modal-header .btn-close {
        top: var(--sz-16);
        right: var(--sz-16);
    }
    .modal-header .divider {
        margin: var(--sz-12) 0;
    }
    .modal-body {
        padding: var(--sz-20) 0;
    }
    .modal-body .form-check.square {
        flex-basis: calc(50% - var(--sz-10));
    }
    .modal-footer {
        padding-top: var(--sz-32);
    }
}
/* ------------------------- Modal : End ------------------------- */