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

/* CSS Main Component */

/* CANAVA DESIGN SYSTEM */
/* Writter by Edward Noh */
/* Release Version 0.12 */
* {
     font-family: 'Noto Sans KR', sans-serif;
}

html {
     scroll-behavior: smooth;
}

figure {
     margin: 0;
}

a {
     text-decoration: none;
}

/* Margin & Padding Block */
/* Margin Top Blank Format */
.mt-0 {
     margin-top: 0px !important;
}

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

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

.mt-5 {
     margin-top: 5px !important;
}

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

.mt-7 {
     margin-top: 7px !important;
}

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

.mt-9 {
     margin-top: 9px !important;
}

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

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

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

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

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

.mt-30 {
     margin-top: 30px !important;
}

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

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

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

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

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

.mt-50 {
     margin-top: 50px !important;
}

.mt-52 {
     margin-top: 52px !important;
}

.mt-56 {
     margin-top: 56px !important;
}

.mt-60 {
     margin-top: 60px !important;
}

.mt-64 {
     margin-top: 64px !important;
}

.mt-68 {
     margin-top: 68px !important;
}

.mt-70 {
     margin-top: 70px !important;
}

.mt-72 {
     margin-top: 72px !important;
}

.mt-76 {
     margin-top: 76px !important;
}

.mt-80 {
     margin-top: 80px !important;
}

.mt-84 {
     margin-top: 84px !important;
}

.mt-88 {
     margin-top: 88px !important;
}

.mt-90 {
     margin-top: 90px !important;
}

.mt-92 {
     margin-top: 92px !important;
}

.mt-96 {
     margin-top: 96px !important;
}

.mt-100 {
     margin-top: 100px !important;
}

.mt-150 {
     margin-top: 150px !important;
}

.mt-200 {
     margin-top: 200px !important;
}

.mt-at {
     margin-top: auto;
}

/* Margin Right Blank Format */
.mr-0 {
     margin-right: 0px !important;
}

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

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

.mr-5 {
     margin-right: 5px !important;
}

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

.mr-7 {
     margin-right: 7px !important;
}

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

.mr-9 {
     margin-right: 9px !important;
}

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

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

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

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

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

.mr-30 {
     margin-right: 30px !important;
}

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

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

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

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

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

.mr-50 {
     margin-right: 50px !important;
}

.mr-52 {
     margin-right: 52px !important;
}

.mr-56 {
     margin-right: 56px !important;
}

.mr-60 {
     margin-right: 60px !important;
}

.mr-64 {
     margin-right: 64px !important;
}

.mr-68 {
     margin-right: 68px !important;
}

.mr-70 {
     margin-right: 70px !important;
}

.mr-72 {
     margin-right: 72px !important;
}

.mr-76 {
     margin-right: 76px !important;
}

.mr-80 {
     margin-right: 80px !important;
}

.mr-84 {
     margin-right: 84px !important;
}

.mr-88 {
     margin-right: 88px !important;
}

.mr-90 {
     margin-right: 90px !important;
}

.mr-92 {
     margin-right: 92px !important;
}

.mr-96 {
     margin-right: 96px !important;
}

.mr-100 {
     margin-right: 100px !important;
}

.mr-150 {
     margin-right: 150px !important;
}

.mr-200 {
     margin-right: 200px !important;
}

.mr-at {
     margin-right: auto !important;
}

/* Margin Bottom Blank Format */
.mb-0 {
     margin-bottom: 0px !important;
}

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

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

.mb-5 {
     margin-bottom: 5px !important;
}

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

.mb-7 {
     margin-bottom: 7px !important;
}

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

.mb-9 {
     margin-bottom: 9px !important;
}

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

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

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

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

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

.mb-30 {
     margin-bottom: 30px !important;
}

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

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

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

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

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

.mb-50 {
     margin-bottom: 50px !important;
}

.mb-52 {
     margin-bottom: 52px !important;
}

.mb-56 {
     margin-bottom: 56px !important;
}

.mb-60 {
     margin-bottom: 60px !important;
}

.mb-64 {
     margin-bottom: 64px !important;
}

.mb-68 {
     margin-bottom: 68px !important;
}

.mb-70 {
     margin-bottom: 70px !important;
}

.mb-72 {
     margin-bottom: 72px !important;
}

.mb-76 {
     margin-bottom: 76px !important;
}

.mb-80 {
     margin-bottom: 80px !important;
}

.mb-84 {
     margin-bottom: 84px !important;
}

.mb-88 {
     margin-bottom: 88px !important;
}

.mb-90 {
     margin-bottom: 90px !important;
}

.mb-92 {
     margin-bottom: 92px !important;
}

.mb-96 {
     margin-bottom: 96px !important;
}

.mb-100 {
     margin-bottom: 100px !important;
}

.mb-150 {
     margin-bottom: 150px !important;
}

.mb-200 {
     margin-bottom: 200px !important;
}

.mb-at {
     margin-bottom: auto !important;
}

/* Margin Left Blank Format */
.ml-0 {
     margin-left: 0px !important;
}

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

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

.ml-5 {
     margin-left: 5px !important;
}

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

.ml-7 {
     margin-left: 7px !important;
}

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

.ml-9 {
     margin-left: 9px !important;
}

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

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

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

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

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

.ml-30 {
     margin-left: 30px !important;
}

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

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

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

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

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

.ml-50 {
     margin-left: 50px !important;
}

.ml-52 {
     margin-left: 52px !important;
}

.ml-56 {
     margin-left: 56px !important;
}

.ml-60 {
     margin-left: 60px !important;
}

.ml-64 {
     margin-left: 64px !important;
}

.ml-68 {
     margin-left: 68px !important;
}

.ml-70 {
     margin-left: 70px !important;
}

.ml-72 {
     margin-left: 72px !important;
}

.ml-76 {
     margin-left: 76px !important;
}

.ml-80 {
     margin-left: 80px !important;
}

.ml-84 {
     margin-left: 84px !important;
}

.ml-88 {
     margin-left: 88px !important;
}

.ml-90 {
     margin-left: 90px !important;
}

.ml-92 {
     margin-left: 92px !important;
}

.ml-96 {
     margin-left: 96px !important;
}

.ml-100 {
     margin-left: 100px !important;
}

.ml-150 {
     margin-left: 150px !important;
}

.ml-200 {
     margin-left: 200px !important;
}

.ml-at {
     margin-left: auto !important;
}

/* Padding Bottom Blank Format */
.pd-0 {
     padding: 0px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

.pd-30 {
     padding: 30px !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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Padding Top Blank Format */
.pt-0 {
     padding-top: 0px !important;
}

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

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

.pt-5 {
     padding-top: 5px !important;
}

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

.pt-7 {
     padding-top: 7px !important;
}

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

.pt-9 {
     padding-top: 9px !important;
}

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

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

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

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

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

.pt-30 {
     padding-top: 30px !important;
}

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

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

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

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

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

.pt-50 {
     padding-top: 50px !important;
}

.pt-52 {
     padding-top: 52px !important;
}

.pt-56 {
     padding-top: 56px !important;
}

.pt-60 {
     padding-top: 60px !important;
}

.pt-64 {
     padding-top: 64px !important;
}

.pt-68 {
     padding-top: 68px !important;
}

.pt-70 {
     padding-top: 70px !important;
}

.pt-72 {
     padding-top: 72px !important;
}

.pt-76 {
     padding-top: 76px !important;
}

.pt-80 {
     padding-top: 80px !important;
}

.pt-84 {
     padding-top: 84px !important;
}

.pt-88 {
     padding-top: 88px !important;
}

.pt-90 {
     padding-top: 90px !important;
}

.pt-92 {
     padding-top: 92px !important;
}

.pt-96 {
     padding-top: 96px !important;
}

.pt-100 {
     padding-top: 100px !important;
}

.pt-150 {
     padding-top: 150px !important;
}

.pt-200 {
     padding-top: 200px !important;
}

/* Padding Right Blank Format */
.pr-0 {
     padding-right: 0px !important;
}

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

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

.pr-5 {
     padding-right: 5px !important;
}

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

.pr-7 {
     padding-right: 7px !important;
}

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

.pr-9 {
     padding-right: 9px !important;
}

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

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

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

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

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

.pr-30 {
     padding-right: 30px !important;
}

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

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

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

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

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

.pr-50 {
     padding-right: 50px !important;
}

.pr-52 {
     padding-right: 52px !important;
}

.pr-56 {
     padding-right: 56px !important;
}

.pr-60 {
     padding-right: 60px !important;
}

.pr-64 {
     padding-right: 64px !important;
}

.pr-68 {
     padding-right: 68px !important;
}

.pr-70 {
     padding-right: 70px !important;
}

.pr-72 {
     padding-right: 72px !important;
}

.pr-76 {
     padding-right: 76px !important;
}

.pr-80 {
     padding-right: 80px !important;
}

.pr-84 {
     padding-right: 84px !important;
}

.pr-88 {
     padding-right: 88px !important;
}

.pr-90 {
     padding-right: 90px !important;
}

.pr-92 {
     padding-right: 92px !important;
}

.pr-96 {
     padding-right: 96px !important;
}

.pr-100 {
     padding-right: 100px !important;
}

.pr-150 {
     padding-right: 150px !important;
}

.pr-200 {
     padding-right: 200px !important;
}

/* Padding Bottom Blank Format */
.pb-0 {
     padding-bottom: 0px !important;
}

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

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

.pb-5 {
     padding-bottom: 5px !important;
}

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

.pb-7 {
     padding-bottom: 7px !important;
}

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

.pb-9 {
     padding-bottom: 9px !important;
}

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

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

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

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

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

.pb-30 {
     padding-bottom: 30px !important;
}

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

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

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

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

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

.pb-50 {
     padding-bottom: 50px !important;
}

.pb-52 {
     padding-bottom: 52px !important;
}

.pb-56 {
     padding-bottom: 56px !important;
}

.pb-60 {
     padding-bottom: 60px !important;
}

.pb-64 {
     padding-bottom: 64px !important;
}

.pb-68 {
     padding-bottom: 68px !important;
}

.pb-70 {
     padding-bottom: 70px !important;
}

.pb-72 {
     padding-bottom: 72px !important;
}

.pb-76 {
     padding-bottom: 76px !important;
}

.pb-80 {
     padding-bottom: 80px !important;
}

.pb-84 {
     padding-bottom: 84px !important;
}

.pb-88 {
     padding-bottom: 88px !important;
}

.pb-90 {
     padding-bottom: 90px !important;
}

.pb-92 {
     padding-bottom: 92px !important;
}

.pb-96 {
     padding-bottom: 96px !important;
}

.pb-100 {
     padding-bottom: 100px !important;
}

.pb-150 {
     padding-bottom: 150px !important;
}

.pb-200 {
     padding-bottom: 200px !important;
}

/* Padding Bottom Blank Format */
.pl-0 {
     padding-left: 0px !important;
}

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

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

.pl-5 {
     padding-left: 5px !important;
}

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

.pl-7 {
     padding-left: 7px !important;
}

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

.pl-9 {
     padding-left: 9px !important;
}

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

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

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

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

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

.pl-30 {
     padding-left: 30px !important;
}

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

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

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

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

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

.pl-50 {
     padding-left: 50px !important;
}

.pl-52 {
     padding-left: 52px !important;
}

.pl-56 {
     padding-left: 56px !important;
}

.pl-60 {
     padding-left: 60px !important;
}

.pl-64 {
     padding-left: 64px !important;
}

.pl-68 {
     padding-left: 68px !important;
}

.pl-70 {
     padding-left: 70px !important;
}

.pl-72 {
     padding-left: 72px !important;
}

.pl-76 {
     padding-left: 76px !important;
}

.pl-80 {
     padding-left: 80px !important;
}

.pl-84 {
     padding-left: 84px !important;
}

.pl-88 {
     padding-left: 88px !important;
}

.pl-90 {
     padding-left: 90px !important;
}

.pl-92 {
     padding-left: 92px !important;
}

.pl-96 {
     padding-left: 96px !important;
}

.pl-100 {
     padding-left: 100px !important;
}

.pl-150 {
     padding-left: 150px !important;
}

.pl-200 {
     padding-left: 200px !important;
}



.w-5p  { width: 5%; }
.w-10p { width: 10%; }
.w-15p { width: 15%; }
.w-20p { width: 20%; }
.w-25p { width: 25%; }
.w-30p { width: 30%; }
.w-33p { width: 33.33%; }
.w-35p { width: 35%; }
.w-40p { width: 40%; }
.w-45p { width: 45%; }
.w-50p { width: 50%; }
.w-55p { width: 55%; }
.w-60p { width: 60%; }
.w-65p { width: 65%; }
.w-67p { width: 66.67%; }
.w-70p { width: 70%; }
.w-75p { width: 75%; }
.w-80p { width: 80%; }
.w-85p { width: 85%; }
.w-90p { width: 90%; }
.w-95p { width: 95%; }
.w-100p { width: 100%; }





/* Position Point Top Format */
.cds-ps-top-0 {
     top: var(--position-point-0) !important;
}

.cds-ps-top-1 {
     top: var(--position-point-1) !important;
}

.cds-ps-top-2 {
     top: var(--position-point-2) !important;
}

.cds-ps-top-4 {
     top: var(--position-point-4) !important;
}

.cds-ps-top-8 {
     top: var(--position-point-8) !important;
}

.cds-ps-top-12 {
     top: var(--position-point-12) !important;
}

.cds-ps-top-16 {
     top: var(--position-point-16) !important;
}

.cds-ps-top-24 {
     top: var(--position-point-24) !important;
}

.cds-ps-top-32 {
     top: var(--position-point-32) !important;
}

.cds-ps-top-40 {
     top: var(--position-point-40) !important;
}

.cds-ps-top-64 {
     top: var(--position-point-64) !important;
}

.cds-ps-top-96 {
     top: var(--position-point-96) !important;
}

.cds-ps-top-0per {
     top: var(--position-percent-0) !important;
}

.cds-ps-top-25per {
     top: var(--position-percent-25) !important;
}

.cds-ps-top-50per {
     top: var(--position-percent-50) !important;
}

.cds-ps-top-75per {
     top: var(--position-percent-75) !important;
}

.cds-ps-top-100per {
     top: var(--position-percent-100) !important;
}


/* Position Point Right Format */
.cds-ps-right-0 {
     right: var(--position-point-0) !important;
}

.cds-ps-right-1 {
     right: var(--position-point-1) !important;
}

.cds-ps-right-2 {
     right: var(--position-point-2) !important;
}

.cds-ps-right-4 {
     right: var(--position-point-4) !important;
}

.cds-ps-right-8 {
     right: var(--position-point-8) !important;
}

.cds-ps-right-12 {
     right: var(--position-point-12) !important;
}

.cds-ps-right-16 {
     right: var(--position-point-16) !important;
}

.cds-ps-right-24 {
     right: var(--position-point-24) !important;
}

.cds-ps-right-32 {
     right: var(--position-point-32) !important;
}

.cds-ps-right-40 {
     right: var(--position-point-40) !important;
}

.cds-ps-right-64 {
     right: var(--position-point-64) !important;
}

.cds-ps-right-96 {
     right: var(--position-point-96) !important;
}

.cds-ps-right-0per {
     right: var(--position-percent-0) !important;
}

.cds-ps-right-25per {
     right: var(--position-percent-25) !important;
}

.cds-ps-right-50per {
     right: var(--position-percent-50) !important;
}

.cds-ps-right-75per {
     right: var(--position-percent-75) !important;
}

.cds-ps-right-100per {
     right: var(--position-percent-100) !important;
}


/* Position Point bottom Format */
.cds-ps-bottom-0 {
     bottom: var(--position-point-0) !important;
}

.cds-ps-bottom-1 {
     bottom: var(--position-point-1) !important;
}

.cds-ps-bottom-2 {
     bottom: var(--position-point-2) !important;
}

.cds-ps-bottom-4 {
     bottom: var(--position-point-4) !important;
}

.cds-ps-bottom-8 {
     bottom: var(--position-point-8) !important;
}

.cds-ps-bottom-12 {
     bottom: var(--position-point-12) !important;
}

.cds-ps-bottom-16 {
     bottom: var(--position-point-16) !important;
}

.cds-ps-bottom-24 {
     bottom: var(--position-point-24) !important;
}

.cds-ps-bottom-32 {
     bottom: var(--position-point-32) !important;
}

.cds-ps-bottom-40 {
     bottom: var(--position-point-40) !important;
}

.cds-ps-bottom-64 {
     bottom: var(--position-point-64) !important;
}

.cds-ps-bottom-96 {
     bottom: var(--position-point-96) !important;
}

.cds-ps-bottom-0per {
     bottom: var(--position-percent-0) !important;
}

.cds-ps-bottom-25per {
     bottom: var(--position-percent-25) !important;
}

.cds-ps-bottom-50per {
     bottom: var(--position-percent-50) !important;
}

.cds-ps-bottom-75per {
     bottom: var(--position-percent-75) !important;
}

.cds-ps-bottom-100per {
     bottom: var(--position-percent-100) !important;
}

.cds-ps-hr-ct {
     transform: translateY(-50%);
}

/* Position Point left Format */
.cds-ps-left-0 {
     left: var(--position-point-0) !important;
}

.cds-ps-left-1 {
     left: var(--position-point-1) !important;
}

.cds-ps-left-2 {
     left: var(--position-point-2) !important;
}

.cds-ps-left-4 {
     left: var(--position-point-4) !important;
}

.cds-ps-left-8 {
     left: var(--position-point-8) !important;
}

.cds-ps-left-12 {
     left: var(--position-point-12) !important;
}

.cds-ps-left-16 {
     left: var(--position-point-16) !important;
}

.cds-ps-left-24 {
     left: var(--position-point-24) !important;
}

.cds-ps-left-32 {
     left: var(--position-point-32) !important;
}

.cds-ps-left-40 {
     left: var(--position-point-40) !important;
}

.cds-ps-left-64 {
     left: var(--position-point-64) !important;
}

.cds-ps-left-96 {
     left: var(--position-point-96) !important;
}

.cds-ps-left-0per {
     left: var(--position-percent-0) !important;
}

.cds-ps-left-25per {
     left: var(--position-percent-25) !important;
}

.cds-ps-left-50per {
     left: var(--position-percent-50) !important;
}

.cds-ps-left-75per {
     left: var(--position-percent-75) !important;
}

.cds-ps-left-100per {
     left: var(--position-percent-100) !important;
}

.cds-ps-vt-ct {
     transform: translateX(-50%);
}

/* Width Break Point */
.cds-bp-min-width-0 {
     min-width: var(--width-none) !important;
}

.cds-bp-min-width-xs {
     min-width: var(--width-xs) !important;
}

.cds-bp-min-width-sm {
     min-width: var(--width-sm) !important;
}

.cds-bp-min-width-md {
     min-width: var(--width-md) !important;
}

.cds-bp-min-width-lg {
     min-width: var(--width-lg) !important;
}

.cds-bp-min-width-xl {
     min-width: var(--width-xl) !important;
}

.cds-bp-min-width-per-sm {
     min-width: var(--width-per-sm) !important;
}

.cds-bp-min-width-per-md {
     min-width: var(--width-per-md) !important;
}

.cds-bp-min-width-per-lg {
     min-width: var(--width-per-lg) !important;
}

.cds-bp-min-width-per-xl {
     min-width: var(--width-per-xl) !important;
}

.cds-bp-max-width-0 {
     max-width: var(--width-none) !important;
}

.cds-bp-max-width-xs {
     max-width: var(--width-xs) !important;
}

.cds-bp-max-width-sm {
     max-width: var(--width-sm) !important;
}

.cds-bp-max-width-md {
     max-width: var(--width-md) !important;
}

.cds-bp-max-width-lg {
     max-width: var(--width-lg) !important;
}

.cds-bp-max-width-xl {
     max-width: var(--width-xl) !important;
}

.cds-bp-max-width-per-sm {
     max-width: var(--width-per-sm) !important;
}

.cds-bp-max-width-per-md {
     max-width: var(--width-per-md) !important;
}

.cds-bp-max-width-per-lg {
     max-width: var(--width-per-lg) !important;
}

.cds-bp-max-width-per-xl {
     max-width: var(--width-per-xl) !important;
}


/* Height Break Point */
.cds-bp-min-height-0 {
     min-height: var(--height-none) !important;
}

.cds-bp-min-height-xs {
     min-height: var(--height-xs) !important;
}

.cds-bp-min-height-sm {
     min-height: var(--height-sm) !important;
}

.cds-bp-min-height-md {
     min-height: var(--height-md) !important;
}

.cds-bp-min-height-lg {
     min-height: var(--height-lg) !important;
}

.cds-bp-min-height-xl {
     min-height: var(--height-xl) !important;
}

.cds-bp-min-height-per-sm {
     min-height: var(--height-per-sm) !important;
}

.cds-bp-min-height-per-md {
     min-height: var(--height-per-md) !important;
}

.cds-bp-min-height-per-lg {
     min-height: var(--height-per-lg) !important;
}



.cds-bp-max-height-0 {
     max-height: var(--height-none) !important;
}

.cds-bp-max-height-xs {
     max-height: var(--height-xs) !important;
}

.cds-bp-max-height-sm {
     max-height: var(--height-sm) !important;
}

.cds-bp-max-height-md {
     max-height: var(--height-md) !important;
}

.cds-bp-max-height-lg {
     max-height: var(--height-lg) !important;
}

.cds-bp-max-height-xl {
     max-height: var(--height-xl) !important;
}

.cds-bp-max-height-per-sm {
     max-height: var(--height-per-sm) !important;
}

.cds-bp-max-height-per-md {
     max-height: var(--height-per-md) !important;
}

.cds-bp-max-height-per-lg {
     max-height: var(--height-per-lg) !important;
}


/* Align Set Up */
.cds-align-lt {
     text-align: left;
}

.cds-align-rt {
     text-align: right;
}

.cds-align-ct {
     text-align: center;
}


.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }



/* Flex Layout */
.cds-grid {
     display: -ms-flex;
     display: -webkit-box;
     display: flex;
}

.cds-grid>div {
     box-sizing: border-box;
     position: relative;
}

.cds-grid-vt-top {
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
}

.cds-grid-vt-md {
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;

}

.cds-grid-vt-bt {
     -webkit-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
}

.cds-grid-vt-base {
     -webkit-box-align: baseline;
     -ms-flex-align: baseline;
     align-items: baseline;
}

.cds-grid-hr-top {
     -webkit-box-pack: start;
     -ms-flex-pack: start;
     justify-content: flex-start;
}

.cds-grid-hr-md {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
}

.cds-grid-hr-bt {
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     justify-content: flex-end;
}

.cds-grid-hr-sd {
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
}

.cds-grid-hr-around {
     justify-content: space-around;
}

/* 해당 스타일은 안드로이드 2.1~4.3 브라우저와 IE 10 브라우저가 공통으로 지원하지 않는 속성 */
/* 2의 제곱 */
.cds-grid-wrap-1 {
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex-grow: 1;
     flex: 1;
}

.cds-grid-wrap-2 {
     -webkit-box-flex: 2;
     -ms-flex: 2;
     flex-grow: 2;
     flex: 2;
}

.cds-grid-wrap-4 {
     -webkit-box-flex: 4;
     -ms-flex: 4;
     flex-grow: 4;
     flex: 4;
}

.cds-grid-wrap-8 {
     -webkit-box-flex: 8;
     -ms-flex: 8;
     flex-grow: 8;
     flex: 8;
}

.cds-grid-wrap-16 {
     -webkit-box-flex: 16;
     -ms-flex: 16;
     flex-grow: 16;
     flex: 16;
}

.cds-grid-wrap-32 {
     -webkit-box-flex: 32;
     -ms-flex: 32;
     flex-grow: 32;
     flex: 32;
}

/* Grid column ratio */
.cds-grid-col-1-2 {
     display: grid;
     grid-template-columns: 1fr 2fr;
}
.cds-grid-col-2-1 {
     display: grid;
     grid-template-columns: 2fr 1fr;
}

/* Paragraph */
.cds-font {
     font-family: 'Noto Sans KR', sans-serif;
     letter-spacing: -1px;
}

.cds-font-row {
     width: 80%;
     margin: 0 auto;
}

.cds-font-wh {
     color: var(--mono50);
}

.cds-font-h1 {
     font-size: 80px;
     line-height: 88px;
     margin-bottom: 24px;
     font-weight: bold;
}

.cds-font-h2 {
     font-size: 40px;
     line-height: 48px;
     margin-bottom: 16px;
     font-weight: bold;
}

.cds-font-h3 {
     font-size: 24px;
     line-height: 32px;
     margin-bottom: 16px;
     font-weight: bold;
}

.cds-font-h4 {
     font-size: 18px;
     line-height: 26px;
     margin-bottom: 16px;
     font-weight: bold;
}

.cds-font-h4-300 {
     font-size: 18px;
     line-height: 26px;
     margin-bottom: 16px;
     font-weight: 300;
}

.cds-font-h4-400 {
     font-size: 18px;
     line-height: 26px;
     margin-bottom: 16px;
     font-weight: 400;
     color: var(--mono850);
}

.cds-font-paragraph {
     font-size: 16px;
     line-height: 24px;
     margin-bottom: 16px;
}

.cds-font-body {
     font-size: 16px;
     line-height: 20px;
     margin-bottom: 16px;
}

.cds-font-body-bd {
     font-size: 16px;
     line-height: 20px;
     margin-bottom: 16px;
     font-weight: bold;
}

.cds-font-paragraph-sm {
     font-size: 14px;
     line-height: 20px;
     margin-bottom: 16px;
}




.cds-font-sm {
     font-size: 14px;
     line-height: 16px;
     margin-bottom: 16px;
     display: grid;
     gap: 10px;
     text-align: center;
}

.cds-font-sm-bd {
     font-size: 14px;
     line-height: 16px;
     margin-bottom: 16px;
     font-weight: bold;
}

.cds-font-sm-up {
     font-size: 14px;
     line-height: 16px;
     margin-bottom: 16px;
     text-transform: uppercase;
}

.cds-font-xs {
     font-size: 12px;
     line-height: 16px;
     margin-bottom: 10px;
}

.cds-font-xs-bd {
     font-size: 12px;
     line-height: 16px;
     margin-bottom: 10px;
     font-weight: bold;
}

.cds-font-xs-up {
     font-size: 12px;
     line-height: 16px;
     margin-bottom: 10px;
     text-transform: uppercase;
}

.cds-font-tiny {
     font-size: 10px;
     line-height: 20px;
     margin-bottom: 10px;
}

.cds-font-tiny-bd {
     font-size: 10px;
     line-height: 20px;
     margin-bottom: 10px;
     font-weight: bold;
}

.cds-font-tiny-up {
     font-size: 10px;
     line-height: 20px;
     margin-bottom: 10px;
     text-transform: uppercase;
}


/* Buttons */
.cds-btn {
     display: inline-block;
     box-sizing: border-box;
}

.cds-btn a {
     display: inline-block;
     -webkit-transition: 0.2s ease;
     -moz-transition: 0.2s ease;
     transition: 0.2s ease;
}

.cds-btn a>i.iconRight {
     margin-left: 5px;
}

.cds-btn a>i.iconLeft {
     margin-right: 5px;
}

.cds-btn-primary {
     color: var(--mono50);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--neutral900);
     background: var(--neutral900);
     padding: 8px 25px;
     border-radius: var(--radius-s);
}

.cds-btn-primary:hover {
     background: var(--neutral800);
     border-color: var(--neutral800);
}

.cds-btn-primary-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     padding: 8px 25px;
     border-radius: var(--radius-s);
     cursor: not-allowed;
}

.cds-btn-primary-purple {
     color: var(--mono50);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--purple700);
     background: var(--purple700);
     padding: 8px 25px;
     border-radius: var(--radius-s);
}

.cds-btn-primary-purple:hover {
     background: var(--purple900);
     border-color: var(--purple900);
}

.cds-btn-primary-purple-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     padding: 8px 25px;
     border-radius: var(--radius-s);
     cursor: not-allowed;
}

.cds-btn-neutral {
     color: var(--neutral600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono200);
     background: var(--mono50);
     padding: 8px 25px;
     border-radius: var(--radius-s);
}

.cds-btn-neutral:hover {
     background: var(--mono200);
     border-color: var(--mono200);
}

.cds-btn-neutral-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     padding: 8px 25px;
     border-radius: var(--radius-s);
     cursor: not-allowed;
}

.cds-btn-capsule-common {
     color: var(--mono50);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--neutral900);
     background: var(--neutral900);
     border-radius: 100px;
     padding: 8px 25px;
}

.cds-btn-capsule-common:hover {
     background: var(--neutral800);
     border-color: var(--neutral800);
}

.cds-btn-capsule-common-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     border-radius: 100px;
     padding: 8px 25px;
     cursor: not-allowed;
}

.cds-btn-capsule-purple {
     color: var(--mono50);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--purple700);
     background: var(--purple700);
     border-radius: 100px;
     padding: 8px 25px;
}

.cds-btn-capsule-purple:hover {
     background: var(--purple900);
     border-color: var(--purple900);
}

.cds-btn-capsule-purple-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     border-radius: 100px;
     padding: 8px 25px;
     cursor: not-allowed;
}

.cds-btn-capsule-secondary {
     color: var(--neutral900);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono200);
     background: var(--mono50);
     border-radius: 100px;
     padding: 8px 25px;
}

.cds-btn-capsule-secondary:hover {
     background: var(--mono200);
     border-color: var(--mono200);
}

.cds-btn-capsule-secondary-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     border-radius: 100px;
     padding: 8px 25px;
     cursor: not-allowed;
}

.cds-btn-text-transparents {
     color: var(--neutral600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 0;
     background: transparent;
     border-radius: var(--radius-s);
     padding: 5px 10px;
}

.cds-btn-text-transparents:hover {
     background: var(--mono200);
}

.cds-btn-text-transparents-disabled {
     color: var(--mono300);
     font-size: 15px;
     letter-spacing: -1px;
     border: 0;
     background: transparent;
     border-radius: var(--radius-s);
     padding: 5px 10px;
     cursor: not-allowed;
}

.cds-btn-text-purple {
     color: var(--purple700);
     font-size: 15px;
     letter-spacing: -1px;
     border: 0;
     background: transparent;
     border-radius: var(--radius-s);
     padding: 5px 10px;
}

.cds-btn-text-purple:hover {
     background: var(--mono200);
     color: var(--purple900);
}

.cds-btn-text-purple-disabled {
     color: var(--mono300);
     font-size: 15px;
     letter-spacing: -1px;
     border: 0;
     background: transparent;
     border-radius: var(--radius-s);
     padding: 5px 10px;
     cursor: not-allowed;
}

.cds-btn-text-hyperlink {
     color: var(--blue500);
     font-size: 15px;
     letter-spacing: -1px;
     border: 0;
     background: transparent;
}

.cds-btn-text-hyperlink:hover {
     color: var(--blue600);
}

.cds-btn-text-hyperlink-disabled {
     color: var(--mono300);
     font-size: 15px;
     letter-spacing: -1px;
     border: 0;
     background: transparent;
     cursor: not-allowed;
}

.cds-btn-tm-transparents {
     color: var(--tmgr700);
     font-size: 15px;
     letter-spacing: -1px;
     border: 0;
     background: transparent;
     border-radius: var(--radius-s);
     padding: 5px 10px;
}

.cds-btn-tm-transparents:hover {
     background: var(--mono200);
     color: var(--tmgr900);
}

.cds-btn-tm-transparents-disabled {
     color: var(--mono300);
     font-size: 15px;
     letter-spacing: -1px;
     border: 0;
     background: transparent;
     border-radius: var(--radius-s);
     padding: 5px 10px;
     cursor: not-allowed;
}

.cds-btn-tm-box {
     color: var(--mono50);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--tmgr700);
     background: var(--tmgr700);
     padding: 8px 25px;
     border-radius: var(--radius-s);
}

.cds-btn-tm-box:hover {
     background: var(--tmgr900);
     border-color: var(--tmgr900);
}

.cds-btn-tm-box-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     padding: 8px 25px;
     border-radius: var(--radius-s);
     cursor: not-allowed;
}

.cds-btn-tm-box-big {
     color: var(--mono50);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--tmgr700);
     background: var(--tmgr700);
     padding: 14px 35px;
     border-radius: var(--radius-s);
}

.cds-btn-tm-box-big:hover {
     background: var(--tmgr900);
     border-color: var(--tmgr900);
}

.cds-btn-tm-box-big-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     padding: 8px 25px;
     border-radius: var(--radius-s);
     cursor: not-allowed;
}

.cds-btn-tm-capsule {
     color: var(--mono50);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--tmgr700);
     background: var(--tmgr700);
     border-radius: 100px;
     padding: 8px 25px;
}

.cds-btn-tm-capsule:hover {
     background: var(--tmgr900);
     border-color: var(--tmgr900);
     color: var(--mono50);
}

.cds-btn-tm-capsule-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     border-radius: 100px;
     padding: 8px 25px;
     cursor: not-allowed;
}

.cds-btn-box-transparents {
     color: var(--neutral900);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono200);
     background: var(--mono50);
     padding: 8px 25px;
}

.cds-btn-box-transparents:hover {
     background: var(--mono200);
}

.cds-btn-box-transparents-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     padding: 8px 25px;
     cursor: not-allowed;
}

.cds-btn-box-primary {
     color: var(--mono50);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--neutral900);
     background: var(--neutral900);
     padding: 8px 25px;
}

.cds-btn-box-primary:hover {
     background: var(--neutral800);
     border-color: var(--neutral800);
}

.cds-btn-box-primary-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     padding: 8px 25px;
     cursor: not-allowed;
}

.cds-btn-box-tm {
     color: var(--mono50);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--tmgr700);
     background: var(--tmgr700);
     padding: 8px 25px;
}

.cds-btn-box-tm:hover {
     background: var(--tmgr900);
     border-color: var(--tmgr900);
}

.cds-btn-box-tm-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     padding: 8px 25px;
     cursor: not-allowed;
}

.cds-btn-box-tm-neutral {
     color: var(--tmgr700);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--tmgr700);
     background: var(--mono50);
     padding: 8px 25px;
}

.cds-btn-box-tm-neutral:hover {
     background: var(--tmgr700);
     color: var(--mono50);
}

.cds-btn-box-tm-neutral-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     padding: 8px 25px;
     cursor: not-allowed;
}

.cds-btn-box-purple {
     color: var(--mono50);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--purple700);
     background: var(--purple700);
     padding: 8px 25px;
}

.cds-btn-box-purple:hover {
     background: var(--purple900);
     border-color: var(--purple900);
}

.cds-btn-box-purple-disabled {
     color: var(--mono600);
     font-size: 15px;
     letter-spacing: -1px;
     border: 1px solid var(--mono400);
     background: var(--mono400);
     padding: 8px 25px;
     cursor: not-allowed;
}

@media only screen and (max-width: 640px) {

     .cds-btn-primary,
     .cds-btn-primary-disabled,
     .cds-btn-primary-purple,
     .cds-btn-primary-purple-disabled,
     .cds-btn-neutral,
     .cds-btn-neutral-disabled,
     .cds-btn-capsule-common,
     .cds-btn-capsule-common-disabled,
     .cds-btn-capsule-secondary,
     .cds-btn-capsule-secondary-disabled,
     .cds-btn-capsule-purple,
     .cds-btn-capsule-purple-disabled,
     .cds-btn-text-transparents,
     .cds-btn-text-transparents-disabled,
     .cds-btn-text-purple,
     .cds-btn-text-purple-disabled,
     .cds-btn-tm-transparents,
     .cds-btn-tm-transparents-disabled,
     .cds-btn-tm-box,
     .cds-btn-tm-box-disabled,
     .cds-btn-tm-capsule,
     .cds-btn-tm-capsule-disabled,
     .cds-btn-box-transparents,
     .cds-btn-box-transparents-disabled,
     .cds-btn-box-primary,
     .cds-btn-box-primary-disabled,
     .cds-btn-box-tm,
     .cds-btn-box-tm-disabled,
     .cds-btn-box-tm-neutral,
     .cds-btn-box-tm-neutral-disabled,
     .cds-btn-text-hyperlink,
     .cds-btn-text-hyperlink-disabled,
     .cds-btn-box-purple,
     .cds-btn-box-purple-disabled {
          font-size: 13px;
          padding: 6px 20px;
          transform: scale(1);
     }

     .cds-btn-tm-box-big {
          transform: scale(1);
     }

     /* Pressed Interactive Btn Style (Mobile Only) */
     .cds-btn-primary:hover {
          background: var(--neutral800);
     }

     .cds-btn-primary:active {
          background: var(--neutral800);
          transform: scale(0.95);
     }

     .cds-btn-primary-purple:hover {
          background: var(--purple900);
     }

     .cds-btn-primary-purple:active {
          background: var(--purple900);
          transform: scale(0.95);
     }

     .cds-btn-neutral:hover {
          background: var(--mono200);
     }

     .cds-btn-neutral:active {
          background: var(--mono200);
          transform: scale(0.95);
     }

     .cds-btn-capsule-common:hover {
          background: var(--neutral800);
     }

     .cds-btn-capsule-common:active {
          background: var(--neutral800);
          transform: scale(0.95);
     }

     .cds-btn-capsule-secondary:hover {
          background: var(--mono300)
     }

     .cds-btn-capsule-secondary:active {
          background: var(--mono300);
          transform: scale(0.95);
     }

     .cds-btn-capsule-purple:hover {
          background: var(--purple900);
     }

     .cds-btn-capsule-purple:active {
          background: var(--purple900);
          transform: scale(0.95);
     }

     .cds-btn-text-transparents:hover,
     .cds-btn-text-transparents:active {
          background: var(--mono300);
     }

     .cds-btn-text-purple:hover,
     .cds-btn-text-purple:active {
          color: var(--purple900);
          background: var(--mono300);
     }

     .cds-btn-tm-transparents:hover {
          background: var(--tmgr900);
          color: var(--mono50);
     }

     .cds-btn-tm-transparents:active {
          background: var(--tmgr900);
          color: var(--mono50);
          transform: scale(0.95);
     }

     .cds-btn-tm-box:hover {
          background: var(--tmgr900);
     }

     .cds-btn-tm-box:active {
          background: var(--tmgr900);
          transform: scale(0.95);
     }

     .cds-btn-tm-capsule:hover {
          background: var(--tmgr900);
     }

     .cds-btn-tm-capsule:active {
          background: var(--tmgr900);
          transform: scale(0.95);
     }

     .cds-btn-box-transparents:hover {
          background: var(--mono200);
     }

     .cds-btn-box-transparents:active {
          background: var(--mono200);
          transform: scale(0.95);
     }

     .cds-btn-box-primary:hover {
          background: var(--neutral800);
     }

     .cds-btn-box-primary:active {
          background: var(--neutral800);
          transform: scale(0.95);
     }

     .cds-btn-box-tm:hover {
          background: var(--tmgr900);
     }

     .cds-btn-box-tm:active {
          background: var(--tmgr900);
          transform: scale(0.95);
     }

     .cds-btn-box-tm-neutral:hover {
          background: var(--tmgr700);
     }

     .cds-btn-box-tm-neutral:active {
          background: var(--tmgr700);
          transform: scale(0.95);
     }

     .cds-btn-tm-box-big:hover {
          background: var(--tmgr900);
     }

     .cds-btn-tm-box-big:active {
          background: var(--tmgr900);
          transform: scale(0.95);
     }

     .cds-btn-box-purple:hover {
          background: var(--purple900);
     }

     .cds-btn-box-purple:active {
          background: var(--purple900);
          transform: scale(0.95);
     }

     .cds-btn-text-hyperlink:hover {
          color: var(--blue600);
     }

     .cds-btn-text-hyperlink:active {
          color: var(--blue600);
          transform: scale(0.95);
     }
}


/* Accordion */
.cds-accordion {
     display: block;
     margin-top: 10px;
     padding-top: 10px;

}

.cds-accordion ul {
     list-style: none;
     margin: 0;
     padding: 0;
}

.cds-accordion-vt>li {
     display: block;
     margin-bottom: 20px;
}

.cds-accordion-hr>li {
     display: inline-block;
     margin-right: 10px;
}

.cds-accordion-hr>li:last-child {
     margin-right: 0;
}

.cds-accordion li>a.cds-accordion-btn {
     display: block;
     font-size: 20px;
     font-weight: 500;
     color: var(--neutral600);
     letter-spacing: -1px;
     width: var(--width-per-xl);
     padding: 6px 10px;
     border-radius: 5px;
     -webkit-transition: 0.2s ease;
     -moz-transition: 0.2s ease;
     transition: 0.2s ease;
}

.cds-accordion li>a.cds-accordion-btn:hover {
     background: var(--mono200);
}

.cds-accordion li.on>a.cds-accordion-btn {
     color: var(--tmgr700);
}

/* Label */
span.cds-label {
     display: inline-block;
     padding: 5px 10px;
     font-size: 12px;
     font-weight: 400;
     letter-spacing: -1px;
}

span.cds-label-primary {
     color: var(--neutral800);
     background: var(--mono200);
}

span.cds-label-secondary {
     color: var(--mono50);
     background: var(--neutral600);
}

span.cds-label-third {
     color: var(--mono50);
     background: var(--neutral800);
}

span.cds-label-positive {
     color: var(--tmgr700);
     background: var(--tintGreen);
}

span.cds-label-nagative {
     color: var(--red200);
     background: var(--tintRed);
}

span.cds-label-warning {
     color: var(--yellow300);
     background: var(--tintOrange);
}

span.cds-label-accent {
     color: var(--blue200);
     background: var(--tintBlue);
}

span.cds-label-type-square {
     border-radius: 0;
}

span.cds-label-type-rounded {
     border-radius: 5px;
}

span.cds-label-type-capsule {
     border-radius: 100px;
}

/* Input */
.cds-input {
     display: block;
}

.cds-input input[type='text'],
.cds-input input[type='password'],
.cds-input input[type='tel'],
.cds-input input[type='number'] {
     box-sizing: border-box;
     font-size: 14px;
     font-weight: 400;
     color: var(--neutral900);
     width: 100%;
     height: auto;
     border: 2px solid var(--mono50);
     border-radius: var(--radius-s);
     outline: 1px solid var(--mono200);
     -webkit-transition: var(--timing-s);
     -moz-transition: var(--timing-s);
     transition: var(--timing-s);
}

.cds-input input[type='text']::placeholder,
.cds-input input[type='password']::placeholder,
.cds-input input[type='tel']::placeholder,
.cds-input input[type='number']::placeholder {
     color: var(--neutral600);
}

.cds-input input[type='text'].cds-input-primary:focus,
.cds-input input[type='password'].cds-input-primary:focus,
.cds-input input[type='tel'].cds-input-primary:focus,
.cds-input input[type='number'].cds-input-primary:focus {
     border-color: var(--mono900);
}

.cds-input input[type='text'].cds-input-tm:focus,
.cds-input input[type='password'].cds-input-tm:focus,
.cds-input input[type='tel'].cds-input-tm:focus,
.cds-input input[type='number'].cds-input-tm:focus {
     border-color: var(--tmgr700);
}

.cds-input-searchBar-capsule {
     background-color: var(--mono100) !important;
     height: 48px !important;
     padding: 8px 15px !important;
     border: 1px solid var(--mono200) !important;
     border-radius: 100px;
}

.cds-input-textarea {
     box-sizing: border-box;
     font-size: 14px;
     font-weight: 400;
     color: var(--neutral900);
     border-radius: var(--radius-m);
     border: 1px solid var(--mono200);
     padding: 15px;
}

.cds-input-textarea:focus {
     border-color: var(--tmgr700) !important;
     border-width: 2px;
}

.cds-input-textarea::placeholder {
     color: var(--neutral600);
}

/* Controls */
#cds-controls-tabs-header {
     position: relative;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     padding: 0;
     border-bottom: 1px solid var(--mono200);
}

#cds-controls-tabs-header>a {
     flex: 1;
     position: relative;
     display: inline-block;
     text-decoration: none;
     text-transform: uppercase;
     padding: 20px;
     font-size: 16px;
     font-weight: 400;
     color: var(--neutral600);
     text-align: center;
     outline: ;
     line-height: 1;
     -webkit-transition: 0.2s ease color;
     -moz-transition: 0.2s ease color;
     transition: 0.2s ease color;
}

#cds-controls-tabs-header>a.cds-controls-tabs-active {
     font-weight: bold;
}

#cds-controls-tabs-header>a:not(.cds-controls-tabs-active):hover {
     background-color: inherit;
     color: var(--neutral800);
}

.cds-controls-tabs-bar {
     position: absolute;
     z-index: 10;
     bottom: 0;
     height: 3px;
     display: block;
     left: 0;
     transition: left .2s ease;
     -webkit-transition: left .5s ease;
}

/* Tabs Theme */
/* Primary */
.cds-controls-tabs-primary #cds-controls-tabs-header>a.cds-controls-tabs-active {
     color: var(--neutral900);
     outline: none;
}

.cds-controls-tabs-primary .cds-controls-tabs-bar {
     background: var(--neutral900);
}

/* Primary Tennis Metro */
.cds-controls-tabs-tm #cds-controls-tabs-header>a.cds-controls-tabs-active {
     color: var(--tmgr700);
     outline: none;
}

.cds-controls-tabs-tm .cds-controls-tabs-bar {
     background: var(--tmgr700);
}


@media only screen and (max-width: 520px) {
     #cds-controls-tabs-header>a {
          font-size: 13px;
     }

     .nav-tabs#cds-controls-tabs-header>li>a {
          font-size: 11px;
     }
}

/* Tabs Scale Amount */
/* Tabs Scale Amount Second */
.cds-controls-tabs-2 span.cds-controls-tabs-bar {
     width: 50%;
}

.cds-controls-tabs-2 #tab1-tab.cds-controls-tabs-active~span.cds-controls-tabs-bar {
     left: 0;
}

.cds-controls-tabs-2 #tab2-tab.cds-controls-tabs-active~span.cds-controls-tabs-bar {
     left: 50%;
}

/* Tabs Scale Amount third */
.cds-controls-tabs-3 span.cds-controls-tabs-bar {
     width: 33.3%;
}

.cds-controls-tabs-3 #tab1-tab.cds-controls-tabs-active~span.cds-controls-tabs-bar {
     left: 0;
}

.cds-controls-tabs-3 #tab2-tab.cds-controls-tabs-active~span.cds-controls-tabs-bar {
     left: 33.3%;
}

.cds-controls-tabs-3 #tab3-tab.cds-controls-tabs-active~span.cds-controls-tabs-bar {
     left: 66.6%;
}

/* Tabs Scale Amount Fourth */
.cds-controls-tabs-4 span.cds-controls-tabs-bar {
     width: 25%;
}

.cds-controls-tabs-4 #tab1-tab.cds-controls-tabs-active~span.cds-controls-tabs-bar {
     left: 0;
}

.cds-controls-tabs-4 #tab2-tab.cds-controls-tabs-active~span.cds-controls-tabs-bar {
     left: 25%;
}

.cds-controls-tabs-4 #tab3-tab.cds-controls-tabs-active~span.cds-controls-tabs-bar {
     left: 50%;
}

.cds-controls-tabs-4 #tab4-tab.cds-controls-tabs-active~span.cds-controls-tabs-bar {
     left: 75%;
}


/*checkbox general*/
.cds-controls {
     display: block;
     position: relative;
}

.cds-controls-caption {
     display: inline-block;
     font-size: 14px;
     font-weight: 400;
     letter-spacing: -1px;
     color: var(--neutral600);
}

.cds-controls-caption-error {
     display: inline-block;
     font-size: 14px;
     font-weight: 400;
     letter-spacing: -1px;
     color: var(--red800);
}

.cds-controls-required:before {
     display: inline-block;
     content: "";
     margin: 0 3px 0 0;
     width: 4px;
     height: 4px;
     background: var(--red700);
     border-radius: 100%;
     vertical-align: super;
}

.cds-controls input[type='checkbox'],
.cds-controls input[type='radio'] {
     display: none;
}

.cds-controls-checkbox {
     display: inline-block;
     position: relative;
     width: 26px;
}

.cds-controls input[type='checkbox']+label {
     position: absolute;
     top: -5px;
     transform: translateY(-50%);
     border-radius: 5px;
     cursor: pointer;
     transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
     overflow: hidden;
     z-index: 1;
}

.cds-controls input[type='checkbox']+label:before {
     content: "";
     position: absolute;
     top: 50%;
     right: 0;
     left: 0;
     margin: 0 auto;
     transform: translateY(-50%);
     border-radius: 2px;
     transition: 0.2s ease width, 0.2s ease height;
}

.cds-controls input[type='checkbox']+label:active {
     transform: translateY(-50%) scale(0.9);
}

.cds-controls input[type='checkbox']+label>.check_object {
     position: absolute;
     right: 0;
     left: 0;
     margin: 0 auto;
     transform: rotateZ(-40deg);
}

.cds-controls input[type='checkbox']+label>.check_object:before,
.check_object:after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     border-radius: 2px;
     opacity: 0;
     transition: 0.7s ease transform, 0.5s ease opacity;
     transform: scale(0);
}

.cds-controls input[type='checkbox']:checked+label:before {
     width: 0;
     height: 0;
}

.cds-controls input[type='checkbox']:checked+label .check_object:before,
.cds-controls input[type='checkbox']:checked+label .check_object:after {
     transform: scale(1);
     opacity: 1;
}

/* Checkbox Size */
/* Xsmall */
input[type='checkbox'].cds-controls-checkbox-sm+label {
     width: 16px;
     height: 16px;
}

input[type='checkbox'].cds-controls-checkbox-sm+label:before {
     width: 12px;
     height: 12px;
}

input[type='checkbox'].cds-controls-checkbox-sm+label>.check_object {
     top: 2px;
     width: 8px;
     height: 8px;
     margin-left: 3px;
}

input[type='checkbox'].cds-controls-checkbox-sm+label>.check_object:before {
     width: 9px;
     height: 2px;
}

input[type='checkbox'].cds-controls-checkbox-sm+label>.check_object:after {
     width: 2px;
     height: 5px;
}

/* Small */
input[type='checkbox'].cds-controls-checkbox-md+label {
     width: 20px;
     height: 20px;
}

input[type='checkbox'].cds-controls-checkbox-md+label:before {
     width: 16px;
     height: 16px;
}

input[type='checkbox'].cds-controls-checkbox-md+label>.check_object {
     top: 3px;
     width: 10px;
     height: 10px;
     margin-left: 3px;
}

input[type='checkbox'].cds-controls-checkbox-md+label>.check_object:before {
     width: 11px;
     height: 3px;
}

input[type='checkbox'].cds-controls-checkbox-md+label>.check_object:after {
     width: 3px;
     height: 7px;
}

/* Medium */
input[type='checkbox'].cds-controls-checkbox-lg+label {
     width: 24px;
     height: 24px;
}

input[type='checkbox'].cds-controls-checkbox-lg+label:before {
     width: 20px;
     height: 20px;
}

input[type='checkbox'].cds-controls-checkbox-lg+label>.check_object {
     top: 2px;
     width: 13px;
     height: 13px;
     margin-left: 4px;
}

input[type='checkbox'].cds-controls-checkbox-lg+label>.check_object:before {
     width: 13px;
     height: 3px;
}

input[type='checkbox'].cds-controls-checkbox-lg+label>.check_object:after {
     width: 3px;
     height: 8px;
}

/* Checkbox Theme*/
/* Tennis Metro */
input[type='checkbox'].cds-controls-checkbox-tm+label {
     background-color: var(--tmgr700);
}

input[type='checkbox'].cds-controls-checkbox-tm+label:before {
     background-color: #fff;
}

input[type='checkbox'].cds-controls-checkbox-tm+label>.check_object:before,
.check_object:after {
     background-color: #fff;
}

/* input[type='checkbox'].cds-controls-checkbox-tm + label > .cds-controls input[type='checkbox']:checked + label { background-color: var(--tmgr700); } */
/* Error */
input[type='checkbox'].cds-controls-checkbox-error+label {
     background-color: var(--red800);
}

input[type='checkbox'].cds-controls-checkbox-error+label:before {
     background-color: var(--mono50);
}

input[type='checkbox'].cds-controls-checkbox-error+label>.check_object:before,
input[type='checkbox'].cds-controls-checkbox-error+label>.check_object:after {
     background-color: var(--mono50);
}

/* Primary */
input[type='checkbox'].cds-controls-checkbox-primary+label {
     background-color: var(--neutral900);
}

input[type='checkbox'].cds-controls-checkbox-primary+label:before {
     background-color: var(--mono50);
}

input[type='checkbox'].cds-controls-checkbox-primary+label>.check_object:before,
input[type='checkbox'].cds-controls-checkbox-primary+label>.check_object:after {
     background-color: var(--mono50);
}

/* Disabled */
input[type='checkbox'].cds-controls-checkbox-disabled+label {
     background-color: var(--mono100);
     border: 1px solid var(--neutral300);
     cursor: not-allowed;
}

input[type='checkbox'].cds-controls-checkbox-disabled+label:before {
     background-color: var(--mono100);
}

input[type='checkbox'].cds-controls-checkbox-disabled+label>.check_object:before,
input[type='checkbox'].cds-controls-checkbox-disabled+label>.check_object:after {
     background-color: var(--neutral300);
}




/* Responsive Table */
.cds-table {
     border: 1px solid var(--mono200);
     border-collapse: collapse;
     margin: 0;
     padding: 0;
     width: 100%;
     table-layout: fixed;
}

.cds-table tr {
     background-color: var(--mono50);
     border: 1px solid var(--mono200);
     padding: .35em;
}

.cds-table th {
     font-size: 16px;
     text-transform: uppercase;
     background: var(--tmgr700);
     color: var(--mono50);
}

.cds-table td {
     font-size: 14px;
     color: var(--neutral600);
}

.cds-table th,
.cds-table td {
     letter-spacing: -1px;
     padding: .625em;
     text-align: center;
}

@media screen and (max-width: 600px) {
     .cds-table {
          border: 0;
     }

     .cds-table thead {
          border: none;
          clip: rect(0 0 0 0);
          height: 1px;
          margin: -1px;
          overflow: hidden;
          padding: 0;
          position: absolute;
          width: 1px;
     }

     .cds-table tr {
          display: block;
          margin-bottom: 10px;
     }

     .cds-table td {
          border-bottom: 1px solid var(--mono200);
          display: block;
          font-size: 14px;
          text-align: right;
          color: var(--neutral600);
     }

     .cds-table td::before {
          content: attr(data-label);
          float: left;
          font-weight: bold;
          text-transform: uppercase;
          color: var(--neutral900);
     }

     .cds-table td:last-child {
          border-bottom: 0;
     }
}



/* COLORS */
/* Background Theme */
.cds-bg-primary {
     background: var(--mono50);
}

.cds-bg-primary-inverse {
     background: var(--tmgr700);
}

.cds-bg-secondary {
     background: var(--mono100);
}

.cds-bg-secondary-inverse {
     background: var(--mono850);
}

.cds-bg-tm {
     background: var(--tmgr700);
}

.cds-bg-tertiary-inverse {
     background: var(--neutral900);
}

.cds-bg-state-disabled {
     background: var(--mono400);
}

.cds-bg-overlay-dark {
     background: var(--grayOpacity600);
}

.cds-bg-overlay-dark-inverse {
     background: var(--grayOpacity500);
}

.cds-bg-overlay-light {
     background: var(--grayOpacity300);
}

.cds-bg-overlay-light-inverse {
     background: var(--grayOpacity200);
}

.cds-bg-nagative {
     background: var(--red800);
}

.cds-bg-nagative-inverse {
     background: var(--red900);
}

.cds-bg-warning {
     background: var(--yellow600);
}

.cds-bg-warning-inverse {
     background: var(--yellow900);
}

.cds-bg-positive {
     background: var(--tmgr900);
}

.cds-bg-positive-inverse {
     background: var(--tmgr900);
}

.cds-bg-accent {
     background: var(--blue500);
}

.cds-bg-accent-inverse {
     background: var(--blue800);
}

.cds-bg-light-nagative {
     background: var(--tintRed);
}

.cds-bg-light-warning {
     background: var(--tintYellow);
}

.cds-bg-light-positive {
     background: var(--tintGreen);
}

.cds-bg-light-accent {
     background: var(--tintBlue);
}

.cds-bg-purple {
     background: var(--purple700);
}

/* Contents */
.cds-contents-primary {
     color: var(--mono900) !important;
}

.cds-contents-primary-inverse {
     color: var(--mono50) !important;
}

.cds-contents-secondary {
     color: var(--neutral600) !important;
}

.cds-contents-description {
     color: var(--mono500) !important;
}

.cds-contents-white {
     color: var(--mono50) !important;
}

.cds-contents-hyperlink {
     color: var(--blue500) !important;
}

.cds-contents-hyperlink:hover {
     color: var(--blue600) !important;
}

.cds-contents-hyperlink-tm,
.cds-contents-tm {
     color: var(--tmgr700) !important;
}

.cds-contents-hyperlink-tm-inverse {
     color: var(--tmgr900) !important;
}

.cds-contents-hyperlink-tm:hover {
     color: var(--tmgr900) !important;
}

.cds-contents-hyperlink-tm-inverse:hover {
     color: var(--tmgr0) !important;
}

.cds-contents-state-disabled {
     color: var(--mono600) !important;
}

.cds-contents-strong {
     color: var(--neutral600) !important;
}

.cds-contents-nagative {
     color: var(--red200) !important;
}

.cds-contents-warning {
     color: var(--yellow200) !important;
}

.cds-contents-positive {
     color: var(--tmgr700) !important;
}

.cds-contents-accent {
     color: var(--blue200) !important;
}

.cds-contents-nagative-inverse {
     color: var(--red300) !important;
}

.cds-contents-warning-inverse {
     color: var(--yellow400) !important;
}

.cds-contents-positive-inverse {
     color: var(--tmgr900) !important;
}

.cds-contents-accent-inverse {
     color: var(--blue300) !important;
}

.cds-contents-purple {
     color: var(--purple700) !important;
}

/* animation */
.cds-animation-s {
     -webkit-transition: var(--timing-s);
     -moz-transition: var(--timing-s);
     transition: var(--timing-s);
}

.cds-animation-m {
     -webkit-transition: var(--timing-m);
     -moz-transition: var(--timing-m);
     transition: var(--timing-m);
}

.cds-animation-l {
     -webkit-transition: var(--timing-l);
     -moz-transition: var(--timing-l);
     transition: var(--timing-l);
}

.cds-animation-scale {
     -webkit-transform: scale(1.0);
     -moz-transform: scale(1.0);
     transform: scale(1.0);
}

.cds-animation-scale:hover {
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     transform: scale(1.1);
}

/* General Style */
.pc-only {
     display: block !important;
     position: relative;
}

.pc-only img {
     width: 100%;
}

.pc-only img .roundImg {
     border-radius: var(--radius-s);
}

.pc-only img.xlImg {
     width: var(--width-per-lg);
     max-width: var(--width-xl);
}

.pc-only img.lgImg {
     width: var(--width-per-lg);
     max-width: var(--width-lg);
}

.pc-only img.mdImg {
     width: var(--width-per-lg);
     max-width: var(--width-md);
}

.pc-only img.smImg {
     width: var(--width-per-lg);
     max-width: var(--width-sm);
}

.pc-only img.xsImg {
     width: var(--width-per-lg);
     max-width: var(--width-xs);
}

.mo-only {
     display: none !important;
     position: relative;
}

.mo-only img {
     width: 100%;
}

.mo-only img.roundImg {
     border-radius: var(--radius-s);
}

.mo-only img.xlImg {
     width: var(--width-per-lg);
     max-width: var(--width-xl);
}

.mo-only img.lgImg {
     width: var(--width-per-lg);
     max-width: var(--width-lg);
}

.mo-only img.mdImg {
     width: var(--width-per-lg);
     max-width: var(--width-md);
}

.mo-only img.smImg {
     width: var(--width-per-lg);
     max-width: var(--width-sm);
}

.mo-only img.xsImg {
     width: var(--width-per-lg);
     max-width: var(--width-xs);
}

.roundImg {
     border-radius: var(--radius-m);
}

@media only screen and (max-width: 640px) {
     .pc-only {
          display: none !important;
     }

     .mo-only {
          display: block !important;
     }
}

.cds-container {
     width: 100%;
     max-width: 1920px;
     margin: 0 auto;
}

.cds-row {
     width: 100%;
     max-width: 1500px;
     margin: 0 auto;
     position: relative;
     box-sizing: border-box;
}

.cds-row-md {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     position: relative;
     box-sizing: border-box;
}

.cds-ps-absolute {
     position: absolute;
}

.cds-ps-fixed {
     position: fixed;
}

.cds-image-card {
     position: relative;
}

.cds-image-card-caption {
     width: 100%;
}

.cds-video-card {
     overflow: hidden;
     border-radius: var(--radius-m);
     line-height: 1;
}

.cds-video-responsive {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 30px;
     height: 0;
     overflow: hidden;
}

.cds-video-responsive iframe,
.cds-video-responsive object,
.cds-video-responsive embed {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

.cds-slide-container {
     overflow-x: hidden;
}

.cds-slide-container .swiper-wrapper .swiper-slide {
     box-sizing: border-box;
}

.cds-slide-desc {
     position: relative;
}

.cds-slide-image {
     width: 100%;
     line-height: 1;
     margin: 0;
}

.cds-slide-image a {
     display: inline-block;
     line-height: 1;
}

.cds-slide-image img {
     width: 100%;
     line-height: 1;
}

@media only screen and (max-width: 640px) {
     .cds-img-sm {
          width: 100%;
          max-width: 75px;
     }

     .cds-img-md {
          width: 100%;
          max-width: 100px;
     }

     .cds-img-bg {
          width: 100%;
          max-width: 150px;
     }

     .cds-img-ff {
          width: 100%;
     }
}