/* 
* KSODESIGN Style Guide
* 20250312 / 20250709
* Pretendard - bold 700, semibold 600, medium 500, regular 400, light 300
* #600FC9 / 96, 15, 201
* #F7F7F7 / 
* rgba(20, 51, 255, 1)  blue
* rgba(234, 0, 44, 1)  sub
* rgba(255, 122, 0, 1)  main
* rgba(239, 48, 48, 1) red
* rgba(255, 158, 69, 1) orange / opacity-700
* rgba(255, 244, 235, 1)    opacity-100
*
* display-4 .fs-56 3.5rem - section header
* display-2 .fs-72 4.5rem - sub header
* fs-20 1.25rem - sub summary / content
* display-5 .fs-48 3rem - page header
*
* etc
* style="--bs-link-hover-color-rgb: 25, 135, 84;"
*/
:root {
    --main-rgb: 96, 15, 201;
    --sub-rgb: 255, 122, 0;
    --red-rgb: 247, 11, 74;
    --blue-rgb: 24, 102, 226;
    --green-rgb: 1, 136, 125;
    --yellow-rgb: 255, 208, 61;
    --orange-rgb: 255, 122, 0;
    --purple-rgb: 122, 70, 255;
    --pink-rgb: 255, 104, 151;
    --cyan-rgb: 0, 255, 255;
    --teal-rgb: 0, 127, 127;
    --light-rgb: 255, 255, 255;
    --dark-rgb: 0, 0, 0;
    --header-rgb: 34, 34, 34;
    --bg-gray: 150, 150, 150;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --opacity: 1;
    --text-opacity: 1;
    --bg-opacity: 1;
    --border-opacity: 1;
}

/***************************************************
*
* color scheme
*
****************************************************/
.text-main {
    --text-opacity: 1;
    color: rgba(var(--main-rgb), var(--text-opacity)) !important;
}

.text-sub {
    --text-opacity: 1;
    color: rgba(var(--sub-rgb), var(--text-opacity)) !important;
}

.text-red {
    --text-opacity: 1;
    color: rgba(var(--red-rgb), var(--text-opacity)) !important;
}

.text-blue {
    --text-opacity: 1;
    color: rgba(var(--blue-rgb), var(--text-opacity)) !important;
}

.text-green {
    --text-opacity: 1;
    color: rgba(var(--green-rgb), var(--text-opacity)) !important;
}

.text-yellow {
    --text-opacity: 1;
    color: rgba(var(--yellow-rgb), var(--text-opacity)) !important;
}

.text-orange {
    --text-opacity: 1;
    color: rgba(var(--orange-rgb), var(--text-opacity)) !important;
}

.text-purple {
    --text-opacity: 1;
    color: rgba(var(--purple-rgb), var(--text-opacity)) !important;
}

.text-pink {
    --text-opacity: 1;
    color: rgba(var(--pink-rgb), var(--text-opacity)) !important;
}

.text-cyan {
    --text-opacity: 1;
    color: rgba(var(--cyan-rgb), var(--text-opacity)) !important;
}

.text-teal {
    --text-opacity: 1;
    color: rgba(var(--teal-rgb), var(--text-opacity)) !important;
}

.text-light {
    --text-opacity: 1;
    color: rgba(var(--light-rgb), var(--text-opacity)) !important;
}

.text-dark {
    --text-opacity: 1;
    color: rgba(var(--dark-rgb), var(--text-opacity)) !important;
}

.text-black {
    --text-opacity: 1;
    color: rgba(var(--dark-rgb), var(--text-opacity)) !important;
}

.text-white {
    --text-opacity: 1;
    color: rgba(var(--light-rgb), var(--text-opacity)) !important;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
h1,
h2,
h3,
h4,
h5,
h6,
.fs-1,
.fs-2,
.fs-3,
.fs-4,
.fs-5,
.fs-6 {
    --text-opacity: 1;
    /*    color: rgba(var(--header-rgb), var(--text-opacity));*/
}

/* =================== gray =================== */
.text-gray-100 {
    color: var(--gray-100) !important;
}

.text-gray-200 {
    color: var(--gray-200) !important;
}

.text-gray-300 {
    color: var(--gray-300) !important;
}

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

.text-gray-500 {
    color: var(--gray-500) !important;
}

.text-gray-600 {
    color: var(--gray-600) !important;
}

.text-gray-700 {
    color: var(--gray-700) !important;
}

.text-gray-800 {
    color: var(--gray-800) !important;
}

.text-gray-900 {
    color: var(--gray-900) !important;
}

.bg-gray {
    --bg-opacity: 1;
    background-color: rgba(var(--bg-gray), var(--bg-opacity)) !important;
}

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

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

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

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

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

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

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

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

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

/* =================== bg color =================== */
.bg-main {
    --bg-opacity: 1;
    background-color: rgba(var(--main-rgb), var(--bg-opacity)) !important;
}

.bg-sub {
    --bg-opacity: 1;
    background-color: rgba(var(--sub-rgb), var(--bg-opacity)) !important;
}

.bg-red {
    --bg-opacity: 1;
    background-color: rgba(var(--red-rgb), var(--bg-opacity)) !important;
}

.bg-blue {
    --bg-opacity: 1;
    background-color: rgba(var(--blue-rgb), var(--bg-opacity)) !important;
}

.bg-green {
    --bg-opacity: 1;
    background-color: rgba(var(--green-rgb), var(--bg-opacity)) !important;
}

.bg-yellow {
    --bg-opacity: 1;
    background-color: rgba(var(--yellow-rgb), var(--bg-opacity)) !important;
}

.bg-orange {
    --bg-opacity: 1;
    background-color: rgba(var(--orange-rgb), var(--bg-opacity)) !important;
}

.bg-purple {
    --bg-opacity: 1;
    background-color: rgba(var(--purple-rgb), var(--bg-opacity)) !important;
}

.bg-pink {
    --bg-opacity: 1;
    background-color: rgba(var(--pink-rgb), var(--bg-opacity)) !important;
}

.bg-cyan {
    --bg-opacity: 1;
    background-color: rgba(var(--cyan-rgb), var(--bg-opacity)) !important;
}

.bg-teal {
    --bg-opacity: 1;
    background-color: rgba(var(--teal-rgb), var(--bg-opacity)) !important;
}

.bg-light {
    --bg-opacity: 1;
    background-color: rgba(var(--light-rgb), var(--bg-opacity)) !important;
}

.bg-dark {
    --bg-opacity: 1;
    background-color: rgba(var(--dark-rgb), var(--bg-opacity)) !important;
}

/* =================== border color =================== */
.border-main {
    --border-opacity: 1;
    border-color: rgba(var(--main-rgb), var(--border-opacity)) !important;
}

.border-sub {
    --border-opacity: 1;
    border-color: rgba(var(--sub-rgb), var(--border-opacity)) !important;
}

.border-red {
    --border-opacity: 1;
    border-color: rgba(var(--red-rgb), var(--border-opacity)) !important;
}

.border-blue {
    --border-opacity: 1;
    border-color: rgba(var(--blue-rgb), var(--border-opacity)) !important;
}

.border-green {
    --border-opacity: 1;
    border-color: rgba(var(--green-rgb), var(--border-opacity)) !important;
}

.border-yellow {
    --border-opacity: 1;
    border-color: rgba(var(--yellow-rgb), var(--border-opacity)) !important;
}

.border-orange {
    --border-opacity: 1;
    border-color: rgba(var(--orange-rgb), var(--border-opacity)) !important;
}

.border-purple {
    --border-opacity: 1;
    border-color: rgba(var(--purple-rgb), var(--border-opacity)) !important;
}

.border-pink {
    --border-opacity: 1;
    border-color: rgba(var(--pink-rgb), var(--border-opacity)) !important;
}

.border-cyan {
    --border-opacity: 1;
    border-color: rgba(var(--cyan-rgb), var(--border-opacity)) !important;
}

.border-teal {
    --border-opacity: 1;
    border-color: rgba(var(--teal-rgb), var(--border-opacity)) !important;
}

.border-light {
    --border-opacity: 1;
    border-color: rgba(var(--light-rgb), var(--border-opacity)) !important;
}

.border-dark {
    --border-opacity: 1;
    border-color: rgba(var(--dark-rgb), var(--border-opacity)) !important;
}

/* =================== text opacity =================== */
.text-opacity-90 {
    --text-opacity: 0.9;
}

.text-opacity-80 {
    --text-opacity: 0.8;
}

.text-opacity-70 {
    --text-opacity: 0.7;
}

.text-opacity-60 {
    --text-opacity: 0.6;
}

.text-opacity-50 {
    --text-opacity: 0.5;
}

.text-opacity-40 {
    --text-opacity: 0.4;
}

.text-opacity-30 {
    --text-opacity: 0.3;
}

.text-opacity-20 {
    --text-opacity: 0.2;
}

.text-opacity-10 {
    --text-opacity: 0.1;
}

/* =================== bg opacity =================== */
.bg-opacity-90 {
    --bg-opacity: 0.9;
}

.bg-opacity-80 {
    --bg-opacity: 0.8;
}

.bg-opacity-70 {
    --bg-opacity: 0.7;
}

.bg-opacity-60 {
    --bg-opacity: 0.6;
}

.bg-opacity-50 {
    --bg-opacity: 0.5;
}

.bg-opacity-40 {
    --bg-opacity: 0.4;
}

.bg-opacity-30 {
    --bg-opacity: 0.3;
}

.bg-opacity-20 {
    --bg-opacity: 0.2;
}

.bg-opacity-10 {
    --bg-opacity: 0.1;
}

/* =================== border opacity =================== */
.border-opacity-90 {
    --border-opacity: 0.9;
}

.border-opacity-80 {
    --border-opacity: 0.8;
}

.border-opacity-70 {
    --border-opacity: 0.7;
}

.border-opacity-60 {
    --border-opacity: 0.6;
}

.border-opacity-50 {
    --border-opacity: 0.5;
}

.border-opacity-40 {
    --border-opacity: 0.4;
}

.border-opacity-30 {
    --border-opacity: 0.3;
}

.border-opacity-20 {
    --border-opacity: 0.2;
}

.border-opacity-10 {
    --border-opacity: 0.1;
}

.border-opacity-0 {
    --border-opacity: 0;
}

/***************************************************/
.opacity-95 {
    --opacity: 0.95;
    opacity: var(--opacity);
}

.opacity-90 {
    --opacity: 0.9;
    opacity: var(--opacity);
}

.opacity-85 {
    --opacity: 0.85;
    opacity: var(--opacity);
}

.opacity-80 {
    --opacity: 0.8;
    opacity: var(--opacity);
}

.opacity-75 {
    --opacity: 0.75;
    opacity: var(--opacity);
}

.opacity-70 {
    --opacity: 0.7;
    opacity: var(--opacity);
}

.opacity-65 {
    --opacity: 0.65;
    opacity: var(--opacity);
}

.opacity-60 {
    --opacity: 0.6;
    opacity: var(--opacity);
}

.opacity-55 {
    --opacity: 0.55;
    opacity: var(--opacity);
}

.opacity-50 {
    --opacity: 0.5;
    opacity: var(--opacity);
}

.opacity-45 {
    --opacity: 0.45;
    opacity: var(--opacity);
}

.opacity-40 {
    --opacity: 0.4;
    opacity: var(--opacity);
}

.opacity-35 {
    --opacity: 0.35;
    opacity: var(--opacity);
}

.opacity-30 {
    --opacity: 0.3;
    opacity: var(--opacity);
}

.opacity-25 {
    --opacity: 0.25;
    opacity: var(--opacity);
}

.opacity-20 {
    --opacity: 0.2;
    opacity: var(--opacity);
}

.opacity-15 {
    --opacity: 0.15;
    opacity: var(--opacity);
}

.opacity-10 {
    --opacity: 0.1;
    opacity: var(--opacity);
}

/***************************************************
*
* ETC
*
****************************************************/
.lh-md {
    line-height: 1.8 !important;
}

.lh-xl {
    line-height: 2.2 !important;
}

.lh-xxl {
    line-height: 2.5 !important;
}

.shadow-md {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05) !important;
}

/***************************************************
*
* font size scheme 
* 
* display-1 .fs-80 5rem
* display-2 .fs-72 4.5rem
* display-3 .fs-64 4rem
* display-4 .fs-56 3.5rem
* display-5 .fs-48 3rem
* display-6 .fs-40 2.5rem
* h1 .fs-1 .fs-40 2.5rem
* h2 .fs-2 .fs-32 2rem
* h3 .fs-3 .fs-28 1.75rem
* h4 .fs-4 .fs-24 1.5rem
* h5 .fs-5 .fs-20 1.25rem
* h6 .fs-6 .fs-16 1rem
* small .fs-12 .875rem
*
****************************************************/
.fs-12 {
    font-size: 0.75rem !important;
}

.fs-13 {
    font-size: 0.8125rem !important;
}

.fs-14 {
    font-size: 0.875rem !important;
}

.fs-15 {
    font-size: 0.9375rem !important;
}

.fs-16 {
    font-size: 1rem !important;
}

.fs-17 {
    font-size: 1.0625rem !important;
}

.fs-18 {
    font-size: calc(1.07rem + .04vw);
}

.fs-19 {
    font-size: calc(1.1rem + .04vw);
}

.fs-20 {
    font-size: calc(1.1rem + .06vw);
}

.fs-21 {
    font-size: calc(1.260rem + .08vw);
}

.fs-22 {
    font-size: calc(1.265rem + .1vw);
}

.fs-23 {
    font-size: calc(1.275rem + .1vw);
}

.fs-24 {
    font-size: calc(1.28rem + .2vw);
}

.fs-25 {
    font-size: calc(1.285rem + .3vw);
}

.fs-26 {
    font-size: calc(1.29rem + .4vw);
}

.fs-27 {
    font-size: calc(1.295rem + .5vw);
}

.fs-28 {
    font-size: calc(1.3rem + .6vw);
}

.fs-29 {
    font-size: calc(1.305rem + .6vw);
}

.fs-30 {
    font-size: calc(1.31rem + .7vw);
}

.fs-31 {
    font-size: calc(1.315rem + .8vw);
}

.fs-32 {
    font-size: calc(1.325rem + .9vw);
}

.fs-33 {
    font-size: calc(1.33rem + 1vw);
}

.fs-34 {
    font-size: calc(1.335rem + 1vw);
}

.fs-35 {
    font-size: calc(1.34rem + 1.1vw);
}

.fs-36 {
    font-size: calc(1.345rem + 1.2vw);
}

.fs-37 {
    font-size: calc(1.35rem + 1.3vw);
}

.fs-38 {
    font-size: calc(1.355rem + 1.4vw);
}

.fs-39 {
    font-size: calc(1.36rem + 1.5vw);
}

.fs-40 {
    font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
    .fs-18 {
        font-size: 1.125rem;
    }

    .fs-19 {
        font-size: 1.1875rem;
    }

    .fs-20 {
        font-size: 1.25rem;
    }

    .fs-21 {
        font-size: 1.3125rem;
    }

    .fs-22 {
        font-size: 1.375rem;
    }

    .fs-23 {
        font-size: 1.4375rem;
    }

    .fs-24 {
        font-size: 1.5rem;
    }

    .fs-25 {
        font-size: 1.5625rem;
    }

    .fs-26 {
        font-size: 1.625rem;
    }

    .fs-27 {
        font-size: 1.6875rem;
    }

    .fs-28 {
        font-size: 1.75rem;
    }

    .fs-29 {
        font-size: 1.8125rem;
    }

    .fs-30 {
        font-size: 1.875rem;
    }

    .fs-31 {
        font-size: 1.9375rem;
    }

    .fs-32 {
        font-size: 2rem;
    }

    .fs-33 {
        font-size: 2.0625rem;
    }

    .fs-34 {
        font-size: 2.125rem;
    }

    .fs-35 {
        font-size: 2.1875rem;
    }

    .fs-36 {
        font-size: 2.25rem;
    }

    .fs-37 {
        font-size: 2.3125rem;
    }

    .fs-38 {
        font-size: 2.375rem;
    }

    .fs-39 {
        font-size: 2.4375rem;
    }

    .fs-40 {
        font-size: 2.5rem;
    }
}


/***************************************************
*
* animation
*
****************************************************/
@media (min-width: 992px) {

    @-webkit-keyframes fadeInUpSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, 20%, 0);
            transform: translate3d(0, 20%, 0);
        }

        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }

    @keyframes fadeInUpSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, 20%, 0);
            transform: translate3d(0, 20%, 0);
        }

        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }

    .animate__fadeInUpSmall {
        -webkit-animation-name: fadeInUpSmall;
        animation-name: fadeInUpSmall
    }

    @-webkit-keyframes fadeInLeftSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-3rem, 0, 0);
            transform: translate3d(-3rem, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }

    @keyframes fadeInLeftSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-3rem, 0, 0);
            transform: translate3d(-3rem, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }

    .animate__fadeInLeftSmall {
        -webkit-animation-name: fadeInLeftSmall;
        animation-name: fadeInLeftSmall
    }

    @-webkit-keyframes fadeInRightSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(3rem, 0, 0);
            transform: translate3d(3rem, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }

    @keyframes fadeInRightSmall {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(3rem, 0, 0);
            transform: translate3d(3rem, 0, 0)
        }

        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }

    .animate__fadeInRightSmall {
        -webkit-animation-name: fadeInRightSmall;
        animation-name: fadeInRightSmall
    }
}


@media (max-width: 576px) {
    .fs-xs-24 {
        font-size: 1.5rem !important;
    }

    .fs-xs-22 {
        font-size: 1.375rem !important;
    }

    .fs-xs-20 {
        font-size: 1.25rem !important;
    }

    .fs-xs-18 {
        font-size: 1.125rem !important;
    }

    .fs-xs-16 {
        font-size: 1rem !important;
    }

    .fs-xs-14 {
        font-size: .825rem !important;
    }

    .lh-160 {
        line-height: 160% !important;
    }
}

/*width*/
.w-90 {
    width: 90% !important;
}

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

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

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

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

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

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

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

.w-10 {
    width: 10% !important;
}
@media (min-width: 576px) {
    .w-sm-90 {
        width: 90% !important;
    }

    .w-sm-80 {
        width: 80% !important;
    }

    .w-sm-70 {
        width: 70% !important;
    }

    .w-sm-60 {
        width: 60% !important;
    }

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

    .w-sm-40 {
        width: 40% !important;
    }

    .w-sm-30 {
        width: 30% !important;
    }

    .w-sm-20 {
        width: 20% !important;
    }

    .w-sm-10 {
        width: 10% !important;
    }
}
@media (min-width: 768px) {
    .w-md-90 {
        width: 90% !important;
    }

    .w-md-80 {
        width: 80% !important;
    }

    .w-md-70 {
        width: 70% !important;
    }

    .w-md-60 {
        width: 60% !important;
    }

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

    .w-md-40 {
        width: 40% !important;
    }

    .w-md-30 {
        width: 30% !important;
    }

    .w-md-20 {
        width: 20% !important;
    }

    .w-md-10 {
        width: 10% !important;
    }
}
@media (min-width: 992px) {
    .w-lg-90 {
        width: 90% !important;
    }

    .w-lg-80 {
        width: 80% !important;
    }

    .w-lg-70 {
        width: 70% !important;
    }

    .w-lg-60 {
        width: 60% !important;
    }

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

    .w-lg-40 {
        width: 40% !important;
    }

    .w-lg-30 {
        width: 30% !important;
    }

    .w-lg-20 {
        width: 20% !important;
    }

    .w-lg-10 {
        width: 10% !important;
    }
}
@media (min-width: 1200px) {
    .w-xl-90 {
        width: 90% !important;
    }

    .w-xl-80 {
        width: 80% !important;
    }

    .w-xl-70 {
        width: 70% !important;
    }

    .w-xl-60 {
        width: 60% !important;
    }

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

    .w-xl-40 {
        width: 40% !important;
    }

    .w-xl-30 {
        width: 30% !important;
    }

    .w-xl-20 {
        width: 20% !important;
    }

    .w-xl-10 {
        width: 10% !important;
    }
}