/*
부트스트랩에 있는 브레이크포인트에 따라 클래스를 지정하기 위한 추가 파일
추가 CSS 입력은 최하단 별도 영역에서 작업 진행
*/


/* margin & padding start */


/* 일반 (브레이크 포인트 없음) */

.m-6 {
    margin: 4rem !important;
}

.m-7 {
    margin: 5rem !important;
}

.m-8 {
    margin: 6rem !important;
}

.m-9 {
    margin: 7rem !important;
}

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

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

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

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

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

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

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

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

.ms-6 {
    margin-left: 4rem !important;
}

.ms-7 {
    margin-left: 5rem !important;
}

.ms-8 {
    margin-left: 6rem !important;
}

.ms-9 {
    margin-left: 7rem !important;
}

.me-6 {
    margin-right: 4rem !important;
}

.me-7 {
    margin-right: 5rem !important;
}

.me-8 {
    margin-right: 6rem !important;
}

.me-9 {
    margin-right: 7rem !important;
}

.mx-6 {
    margin-left: 4rem !important;
    margin-right: 4rem !important;
}

.mx-7 {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
}

.mx-8 {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
}

.mx-9 {
    margin-left: 7rem !important;
    margin-right: 7rem !important;
}

.my-6 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}

.my-7 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}

.my-8 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

.my-9 {
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
}

.p-4-5 {
    padding: 2.5rem !important;
}


.p-6 {
    padding: 4rem !important;
}

.p-7 {
    padding: 5rem !important;
}

.p-8 {
    padding: 6rem !important;
}

.p-9 {
    padding: 7rem !important;
}

.pt-4-5 {
    padding-top: 2.5rem !important;
}


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

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

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

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

.pb-4-5 {
    padding-bottom: 2.5rem !important;
}

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

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

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

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

.ps-075 {
    padding-left: 0.75rem;
}

.ps-4-5 {
    padding-left: 2.5rem !important;
}

.ps-6 {
    padding-left: 4rem !important;
}

.ps-7 {
    padding-left: 5rem !important;
}

.ps-8 {
    padding-left: 6rem !important;
}

.ps-9 {
    padding-left: 7rem !important;
}


.pe-6 {
    padding-right: 4rem !important;
}

.pe-7 {
    padding-right: 5rem !important;
}

.pe-8 {
    padding-right: 6rem !important;
}

.pe-9 {
    padding-right: 7rem !important;
}

.px-4-5 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}

.px-6 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
}

.px-7 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
}

.px-8 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
}

.px-9 {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
}

.py-4-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.py-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.py-7 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.py-8 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.py-9 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
}


/* sm 포인트 */

@media (min-width: 576px) {
    .m-sm-6 {
        margin: 4rem !important;
    }

    .m-sm-7 {
        margin: 5rem !important;
    }

    .m-sm-8 {
        margin: 6rem !important;
    }

    .m-sm-9 {
        margin: 7rem !important;
    }

    .mt-sm-6 {
        margin-top: 4rem !important;
    }

    .mt-sm-7 {
        margin-top: 5rem !important;
    }

    .mt-sm-8 {
        margin-top: 6rem !important;
    }

    .mt-sm-9 {
        margin-top: 7rem !important;
    }

    .mb-sm-6 {
        margin-bottom: 4rem !important;
    }

    .mb-sm-7 {
        margin-bottom: 5rem !important;
    }

    .mb-sm-8 {
        margin-bottom: 6rem !important;
    }

    .mb-sm-9 {
        margin-bottom: 7rem !important;
    }

    .ms-sm-6 {
        margin-left: 4rem !important;
    }

    .ms-sm-7 {
        margin-left: 5rem !important;
    }

    .ms-sm-8 {
        margin-left: 6rem !important;
    }

    .ms-sm-9 {
        margin-left: 7rem !important;
    }

    .me-sm-6 {
        margin-right: 4rem !important;
    }

    .me-sm-7 {
        margin-right: 5rem !important;
    }

    .me-sm-8 {
        margin-right: 6rem !important;
    }

    .me-sm-9 {
        margin-right: 7rem !important;
    }

    .mx-sm-6 {
        margin-left: 4rem !important;
        margin-right: 4rem !important;
    }

    .mx-sm-7 {
        margin-left: 5rem !important;
        margin-right: 5rem !important;
    }

    .mx-sm-8 {
        margin-left: 6rem !important;
        margin-right: 6rem !important;
    }

    .mx-sm-9 {
        margin-left: 7rem !important;
        margin-right: 7rem !important;
    }

    .my-sm-6 {
        margin-top: 4rem !important;
        margin-bottom: 4rem !important;
    }

    .my-sm-7 {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }

    .my-sm-8 {
        margin-top: 6rem !important;
        margin-bottom: 6rem !important;
    }

    .my-sm-9 {
        margin-top: 7rem !important;
        margin-bottom: 7rem !important;
    }

    .p-sm-6 {
        padding: 4rem !important;
    }

    .p-sm-7 {
        padding: 5rem !important;
    }

    .p-sm-8 {
        padding: 6rem !important;
    }

    .p-sm-9 {
        padding: 7rem !important;
    }

    .pt-sm-6 {
        padding-top: 4rem !important;
    }

    .pt-sm-7 {
        padding-top: 5rem !important;
    }

    .pt-sm-8 {
        padding-top: 6rem !important;
    }

    .pt-sm-9 {
        padding-top: 7rem !important;
    }

    .pb-sm-6 {
        padding-bottom: 4rem !important;
    }

    .pb-sm-7 {
        padding-bottom: 5rem !important;
    }

    .pb-sm-8 {
        padding-bottom: 6rem !important;
    }

    .pb-sm-9 {
        padding-bottom: 7rem !important;
    }


    .ps-sm-3 {
        padding-left: 1rem !important;
    }

    .ps-sm-4 {
        padding-left: 2rem !important;
    }

    .ps-sm-5 {
        padding-left: 3rem !important;
    }

    .ps-sm-6 {
        padding-left: 4rem !important;
    }

    .ps-sm-7 {
        padding-left: 5rem !important;
    }

    .ps-sm-8 {
        padding-left: 6rem !important;
    }

    .ps-sm-9 {
        padding-left: 7rem !important;
    }

    .pe-sm-6 {
        padding-right: 4rem !important;
    }

    .pe-sm-7 {
        padding-right: 5rem !important;
    }

    .pe-sm-8 {
        padding-right: 6rem !important;
    }

    .pe-sm-9 {
        padding-right: 7rem !important;
    }

    .px-sm-6 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }

    .px-sm-7 {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }

    .px-sm-8 {
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }

    .px-sm-9 {
        padding-left: 7rem !important;
        padding-right: 7rem !important;
    }

    .py-sm-6 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .py-sm-7 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .py-sm-8 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }

    .py-sm-9 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
}


/* md 사이즈 */

@media (min-width: 768px) {
    .m-md-6 {
        margin: 4rem !important;
    }

    .m-md-7 {
        margin: 5rem !important;
    }

    .m-md-8 {
        margin: 6rem !important;
    }

    .m-md-9 {
        margin: 7rem !important;
    }

    .mt-md-6 {
        margin-top: 4rem !important;
    }

    .mt-md-7 {
        margin-top: 5rem !important;
    }

    .mt-md-8 {
        margin-top: 6rem !important;
    }

    .mt-md-9 {
        margin-top: 7rem !important;
    }

    .mb-md-6 {
        margin-bottom: 4rem !important;
    }

    .mb-md-7 {
        margin-bottom: 5rem !important;
    }

    .mb-md-8 {
        margin-bottom: 6rem !important;
    }

    .mb-md-9 {
        margin-bottom: 7rem !important;
    }

    .ms-md-6 {
        margin-left: 4rem !important;
    }

    .ms-md-7 {
        margin-left: 5rem !important;
    }

    .ms-md-8 {
        margin-left: 6rem !important;
    }

    .ms-md-9 {
        margin-left: 7rem !important;
    }

    .me-md-6 {
        margin-right: 4rem !important;
    }

    .me-md-7 {
        margin-right: 5rem !important;
    }

    .me-md-8 {
        margin-right: 6rem !important;
    }

    .me-md-9 {
        margin-right: 7rem !important;
    }

    .mx-md-6 {
        margin-left: 4rem !important;
        margin-right: 4rem !important;
    }

    .mx-md-7 {
        margin-left: 5rem !important;
        margin-right: 5rem !important;
    }

    .mx-md-8 {
        margin-left: 6rem !important;
        margin-right: 6rem !important;
    }

    .mx-md-9 {
        margin-left: 7rem !important;
        margin-right: 7rem !important;
    }

    .my-md-6 {
        margin-top: 4rem !important;
        margin-bottom: 4rem !important;
    }

    .my-md-7 {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }

    .my-md-8 {
        margin-top: 6rem !important;
        margin-bottom: 6rem !important;
    }

    .my-md-9 {
        margin-top: 7rem !important;
        margin-bottom: 7rem !important;
    }

    .p-md-6 {
        padding: 4rem !important;
    }

    .p-md-7 {
        padding: 5rem !important;
    }

    .p-md-8 {
        padding: 6rem !important;
    }

    .p-md-9 {
        padding: 7rem !important;
    }

    .pt-md-6 {
        padding-top: 4rem !important;
    }

    .pt-md-7 {
        padding-top: 5rem !important;
    }

    .pt-md-8 {
        padding-top: 6rem !important;
    }

    .pt-md-9 {
        padding-top: 7rem !important;
    }

    .pb-md-6 {
        padding-bottom: 4rem !important;
    }

    .pb-md-7 {
        padding-bottom: 5rem !important;
    }

    .pb-md-8 {
        padding-bottom: 6rem !important;
    }

    .pb-md-9 {
        padding-bottom: 7rem !important;
    }

    .ps-md-6 {
        padding-left: 4rem !important;
    }

    .ps-md-7 {
        padding-left: 5rem !important;
    }

    .ps-md-8 {
        padding-left: 6rem !important;
    }

    .ps-md-9 {
        padding-left: 7rem !important;
    }

    .pe-md-6 {
        padding-right: 4rem !important;
    }

    .pe-md-7 {
        padding-right: 5rem !important;
    }

    .pe-md-8 {
        padding-right: 6rem !important;
    }

    .pe-md-9 {
        padding-right: 7rem !important;
    }

    .px-md-6 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }

    .px-md-7 {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }

    .px-md-8 {
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }

    .px-md-9 {
        padding-left: 7rem !important;
        padding-right: 7rem !important;
    }

    .py-md-6 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .py-md-7 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .py-md-8 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }

    .py-md-9 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
}


/* lg 사이즈 */

@media (min-width: 992px) {
    .m-lg-6 {
        margin: 4rem !important;
    }

    .m-lg-7 {
        margin: 5rem !important;
    }

    .m-lg-8 {
        margin: 6rem !important;
    }

    .m-lg-9 {
        margin: 7rem !important;
    }

    .mt-lg-6 {
        margin-top: 4rem !important;
    }

    .mt-lg-7 {
        margin-top: 5rem !important;
    }

    .mt-lg-8 {
        margin-top: 6rem !important;
    }

    .mt-lg-9 {
        margin-top: 7rem !important;
    }

    .mt-lg-10 {
        margin-top: 8rem !important;
    }

    .mt-lg-11 {
        margin-top: 9rem !important;
    }

    .mb-lg-6 {
        margin-bottom: 4rem !important;
    }

    .mb-lg-7 {
        margin-bottom: 5rem !important;
    }

    .mb-lg-8 {
        margin-bottom: 6rem !important;
    }

    .mb-lg-9 {
        margin-bottom: 7rem !important;
    }

    .ms-lg-6 {
        margin-left: 4rem !important;
    }

    .ms-lg-7 {
        margin-left: 5rem !important;
    }

    .ms-lg-8 {
        margin-left: 6rem !important;
    }

    .ms-lg-9 {
        margin-left: 7rem !important;
    }

    .me-lg-6 {
        margin-right: 4rem !important;
    }

    .me-lg-7 {
        margin-right: 5rem !important;
    }

    .me-lg-8 {
        margin-right: 6rem !important;
    }

    .me-lg-9 {
        margin-right: 7rem !important;
    }

    .mx-lg-6 {
        margin-left: 4rem !important;
        margin-right: 4rem !important;
    }

    .mx-lg-7 {
        margin-left: 5rem !important;
        margin-right: 5rem !important;
    }

    .mx-lg-8 {
        margin-left: 6rem !important;
        margin-right: 6rem !important;
    }

    .mx-lg-9 {
        margin-left: 7rem !important;
        margin-right: 7rem !important;
    }

    .my-lg-6 {
        margin-top: 4rem !important;
        margin-bottom: 4rem !important;
    }

    .my-lg-7 {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }

    .my-lg-8 {
        margin-top: 6rem !important;
        margin-bottom: 6rem !important;
    }

    .my-lg-9 {
        margin-top: 7rem !important;
        margin-bottom: 7rem !important;
    }

    .p-lg-6 {
        padding: 4rem !important;
    }

    .p-lg-7 {
        padding: 5rem !important;
    }

    .p-lg-8 {
        padding: 6rem !important;
    }

    .p-lg-9 {
        padding: 7rem !important;
    }

    .pt-lg-6 {
        padding-top: 4rem !important;
    }

    .pt-lg-7 {
        padding-top: 5rem !important;
    }

    .pt-lg-8 {
        padding-top: 6rem !important;
    }

    .pt-lg-9 {
        padding-top: 7rem !important;
    }

    .pb-lg-6 {
        padding-bottom: 4rem !important;
    }

    .pb-lg-7 {
        padding-bottom: 5rem !important;
    }

    .pb-lg-8 {
        padding-bottom: 6rem !important;
    }

    .pb-lg-9 {
        padding-bottom: 7rem !important;
    }

    .ps-lg-6 {
        padding-left: 4rem !important;
    }

    .ps-lg-7 {
        padding-left: 5rem !important;
    }

    .ps-lg-8 {
        padding-left: 6rem !important;
    }

    .ps-lg-9 {
        padding-left: 7rem !important;
    }

    .pe-lg-6 {
        padding-right: 4rem !important;
    }

    .pe-lg-7 {
        padding-right: 5rem !important;
    }

    .pe-lg-8 {
        padding-right: 6rem !important;
    }

    .pe-lg-9 {
        padding-right: 7rem !important;
    }

    .px-lg-6 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }

    .px-lg-7 {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }

    .px-lg-8 {
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }

    .px-lg-9 {
        padding-left: 7rem !important;
        padding-right: 7rem !important;
    }

    .py-lg-6 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .py-lg-7 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .py-lg-8 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }

    .py-lg-9 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
}


/* xl 사이즈 */

@media (min-width: 1200px) {
    .m-xl-6 {
        margin: 4rem !important;
    }

    .m-xl-7 {
        margin: 5rem !important;
    }

    .m-xl-8 {
        margin: 6rem !important;
    }

    .m-xl-9 {
        margin: 7rem !important;
    }

    .mt-xl-6 {
        margin-top: 4rem !important;
    }

    .mt-xl-7 {
        margin-top: 5rem !important;
    }

    .mt-xl-8 {
        margin-top: 6rem !important;
    }

    .mt-xl-9 {
        margin-top: 7rem !important;
    }

    .mb-xl-6 {
        margin-bottom: 4rem !important;
    }

    .mb-xl-7 {
        margin-bottom: 5rem !important;
    }

    .mb-xl-8 {
        margin-bottom: 6rem !important;
    }

    .mb-xl-9 {
        margin-bottom: 7rem !important;
    }

    .ms-xl-6 {
        margin-left: 4rem !important;
    }

    .ms-xl-7 {
        margin-left: 5rem !important;
    }

    .ms-xl-8 {
        margin-left: 6rem !important;
    }

    .ms-xl-9 {
        margin-left: 7rem !important;
    }

    .me-xl-6 {
        margin-right: 4rem !important;
    }

    .me-xl-7 {
        margin-right: 5rem !important;
    }

    .me-xl-8 {
        margin-right: 6rem !important;
    }

    .me-xl-9 {
        margin-right: 7rem !important;
    }

    .mx-xl-6 {
        margin-left: 4rem !important;
        margin-right: 4rem !important;
    }

    .mx-xl-7 {
        margin-left: 5rem !important;
        margin-right: 5rem !important;
    }

    .mx-xl-8 {
        margin-left: 6rem !important;
        margin-right: 6rem !important;
    }

    .mx-xl-9 {
        margin-left: 7rem !important;
        margin-right: 7rem !important;
    }

    .my-xl-6 {
        margin-top: 4rem !important;
        margin-bottom: 4rem !important;
    }

    .my-xl-7 {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }

    .my-xl-8 {
        margin-top: 6rem !important;
        margin-bottom: 6rem !important;
    }

    .my-xl-9 {
        margin-top: 7rem !important;
        margin-bottom: 7rem !important;
    }

    .p-xl-6 {
        padding: 4rem !important;
    }

    .p-xl-7 {
        padding: 5rem !important;
    }

    .p-xl-8 {
        padding: 6rem !important;
    }

    .p-xl-9 {
        padding: 7rem !important;
    }

    .pt-xl-6 {
        padding-top: 4rem !important;
    }

    .pt-xl-7 {
        padding-top: 5rem !important;
    }

    .pt-xl-8 {
        padding-top: 6rem !important;
    }

    .pt-xl-9 {
        padding-top: 7rem !important;
    }

    .pb-xl-6 {
        padding-bottom: 4rem !important;
    }

    .pb-xl-7 {
        padding-bottom: 5rem !important;
    }

    .pb-xl-8 {
        padding-bottom: 6rem !important;
    }

    .pb-xl-9 {
        padding-bottom: 7rem !important;
    }

    .ps-xl-6 {
        padding-left: 4rem !important;
    }

    .ps-xl-7 {
        padding-left: 5rem !important;
    }

    .ps-xl-8 {
        padding-left: 6rem !important;
    }

    .ps-xl-9 {
        padding-left: 7rem !important;
    }

    .pe-xl-6 {
        padding-right: 4rem !important;
    }

    .pe-xl-7 {
        padding-right: 5rem !important;
    }

    .pe-xl-8 {
        padding-right: 6rem !important;
    }

    .pe-xl-9 {
        padding-right: 7rem !important;
    }

    .px-xl-6 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }

    .px-xl-7 {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }

    .px-xl-8 {
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }

    .px-xl-9 {
        padding-left: 7rem !important;
        padding-right: 7rem !important;
    }

    .py-xl-6 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .py-xl-7 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .py-xl-8 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }

    .py-xl-9 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
}


/* xxl 사이즈 */

@media (min-width: 1400px) {
    .m-xxl-6 {
        margin: 4rem !important;
    }

    .m-xxl-7 {
        margin: 5rem !important;
    }

    .m-xxl-8 {
        margin: 6rem !important;
    }

    .m-xxl-9 {
        margin: 7rem !important;
    }

    .mt-xxl-6 {
        margin-top: 4rem !important;
    }

    .mt-xxl-7 {
        margin-top: 5rem !important;
    }

    .mt-xxl-8 {
        margin-top: 6rem !important;
    }

    .mt-xxl-9 {
        margin-top: 7rem !important;
    }

    .mb-xxl-6 {
        margin-bottom: 4rem !important;
    }

    .mb-xxl-7 {
        margin-bottom: 5rem !important;
    }

    .mb-xxl-8 {
        margin-bottom: 6rem !important;
    }

    .mb-xxl-9 {
        margin-bottom: 7rem !important;
    }

    .ms-xxl-6 {
        margin-left: 4rem !important;
    }

    .ms-xxl-7 {
        margin-left: 5rem !important;
    }

    .ms-xxl-8 {
        margin-left: 6rem !important;
    }

    .ms-xxl-9 {
        margin-left: 7rem !important;
    }

    .me-xxl-6 {
        margin-right: 4rem !important;
    }

    .me-xxl-7 {
        margin-right: 5rem !important;
    }

    .me-xxl-8 {
        margin-right: 6rem !important;
    }

    .me-xxl-9 {
        margin-right: 7rem !important;
    }

    .mx-xxl-6 {
        margin-left: 4rem !important;
        margin-right: 4rem !important;
    }

    .mx-xxl-7 {
        margin-left: 5rem !important;
        margin-right: 5rem !important;
    }

    .mx-xxl-8 {
        margin-left: 6rem !important;
        margin-right: 6rem !important;
    }

    .mx-xxl-9 {
        margin-left: 7rem !important;
        margin-right: 7rem !important;
    }

    .my-xxl-6 {
        margin-top: 4rem !important;
        margin-bottom: 4rem !important;
    }

    .my-xxl-7 {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }

    .my-xxl-8 {
        margin-top: 6rem !important;
        margin-bottom: 6rem !important;
    }

    .my-xxl-9 {
        margin-top: 7rem !important;
        margin-bottom: 7rem !important;
    }

    .p-xxl-6 {
        padding: 4rem !important;
    }

    .p-xxl-7 {
        padding: 5rem !important;
    }

    .p-xxl-8 {
        padding: 6rem !important;
    }

    .p-xxl-9 {
        padding: 7rem !important;
    }

    .pt-xxl-6 {
        padding-top: 4rem !important;
    }

    .pt-xxl-7 {
        padding-top: 5rem !important;
    }

    .pt-xxl-8 {
        padding-top: 6rem !important;
    }

    .pt-xxl-9 {
        padding-top: 7rem !important;
    }

    .pb-xxl-6 {
        padding-bottom: 4rem !important;
    }

    .pb-xxl-7 {
        padding-bottom: 5rem !important;
    }

    .pb-xxl-8 {
        padding-bottom: 6rem !important;
    }

    .pb-xxl-9 {
        padding-bottom: 7rem !important;
    }

    .ps-xxl-6 {
        padding-left: 4rem !important;
    }

    .ps-xxl-7 {
        padding-left: 5rem !important;
    }

    .ps-xxl-8 {
        padding-left: 6rem !important;
    }

    .ps-xxl-9 {
        padding-left: 7rem !important;
    }

    .pe-xxl-6 {
        padding-right: 4rem !important;
    }

    .pe-xxl-7 {
        padding-right: 5rem !important;
    }

    .pe-xxl-8 {
        padding-right: 6rem !important;
    }

    .pe-xxl-9 {
        padding-right: 7rem !important;
    }

    .px-xxl-6 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }

    .px-xxl-7 {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }

    .px-xxl-8 {
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }

    .px-xxl-9 {
        padding-left: 7rem !important;
        padding-right: 7rem !important;
    }

    .py-xxl-6 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .py-xxl-7 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .py-xxl-8 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }

    .py-xxl-9 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
}

@media (min-width:1600px) {
    .m-xxxl-0 {
        margin: 0 !important;
    }

    .m-xxxl-1 {
        margin: 0.25rem !important;
    }

    .m-xxxl-2 {
        margin: 0.5rem !important;
    }

    .m-xxxl-3 {
        margin: 1rem !important;
    }

    .m-xxxl-4 {
        margin: 1.5rem !important;
    }

    .m-xxxl-5 {
        margin: 3rem !important;
    }

    .m-xxxl-6 {
        margin: 4rem !important;
    }

    .m-xxxl-7 {
        margin: 5rem !important;
    }

    .m-xxxl-8 {
        margin: 6rem !important;
    }

    .m-xxxl-9 {
        margin: 7rem !important;
    }

    .mt-xxxl-0 {
        margin-top: 0 !important;
    }

    .mt-xxxl-1 {
        margin-top: 0.25rem !important;
    }

    .mt-xxxl-2 {
        margin-top: 0.5rem !important;
    }

    .mt-xxxl-3 {
        margin-top: 1rem !important;
    }

    .mt-xxxl-4 {
        margin-top: 1.5rem !important;
    }

    .mt-xxxl-5 {
        margin-top: 3rem !important;
    }

    .mt-xxxl-6 {
        margin-top: 4rem !important;
    }

    .mt-xxxl-7 {
        margin-top: 5rem !important;
    }

    .mt-xxxl-8 {
        margin-top: 6rem !important;
    }

    .mt-xxxl-9 {
        margin-top: 7rem !important;
    }

    .mb-xxxl-0 {
        margin-bottom: 0 !important;
    }

    .mb-xxxl-1 {
        margin-bottom: 0.25rem !important;
    }

    .mb-xxxl-2 {
        margin-bottom: 0.5rem !important;
    }

    .mb-xxxl-3 {
        margin-bottom: 1rem !important;
    }

    .mb-xxxl-4 {
        margin-bottom: 1.5rem !important;
    }

    .mb-xxxl-5 {
        margin-bottom: 3rem !important;
    }

    .mb-xxxl-6 {
        margin-bottom: 4rem !important;
    }

    .mb-xxxl-7 {
        margin-bottom: 5rem !important;
    }

    .mb-xxxl-8 {
        margin-bottom: 6rem !important;
    }

    .mb-xxxl-9 {
        margin-bottom: 7rem !important;
    }

    .ms-xxxl-0 {
        margin-left: 0 !important;
    }

    .ms-xxxl-1 {
        margin-left: 0.25rem !important;
    }

    .ms-xxxl-2 {
        margin-left: 0.5rem !important;
    }

    .ms-xxxl-3 {
        margin-left: 1rem !important;
    }

    .ms-xxxl-4 {
        margin-left: 1.5rem !important;
    }

    .ms-xxxl-5 {
        margin-left: 3rem !important;
    }

    .ms-xxxl-6 {
        margin-left: 4rem !important;
    }

    .ms-xxxl-7 {
        margin-left: 5rem !important;
    }

    .ms-xxxl-8 {
        margin-left: 6rem !important;
    }

    .ms-xxxl-9 {
        margin-left: 7rem !important;
    }

    .me-xxxl-0 {
        margin-right: 0 !important;
    }

    .me-xxxl-1 {
        margin-right: 0.25rem !important;
    }

    .me-xxxl-2 {
        margin-right: 0.5rem !important;
    }

    .me-xxxl-3 {
        margin-right: 1rem !important;
    }

    .me-xxxl-4 {
        margin-right: 1.5rem !important;
    }

    .me-xxxl-5 {
        margin-right: 3rem !important;
    }

    .me-xxxl-6 {
        margin-right: 4rem !important;
    }

    .me-xxxl-7 {
        margin-right: 5rem !important;
    }

    .me-xxxl-8 {
        margin-right: 6rem !important;
    }

    .me-xxxl-9 {
        margin-right: 7rem !important;
    }

    .mx-xxxl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .mx-xxxl-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .mx-xxxl-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .mx-xxxl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .mx-xxxl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .mx-xxxl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .mx-xxxl-6 {
        margin-left: 4rem !important;
        margin-right: 4rem !important;
    }

    .mx-xxxl-7 {
        margin-left: 5rem !important;
        margin-right: 5rem !important;
    }

    .mx-xxxl-8 {
        margin-left: 6rem !important;
        margin-right: 6rem !important;
    }

    .mx-xxxl-9 {
        margin-left: 7rem !important;
        margin-right: 7rem !important;
    }

    .my-xxxl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .my-xxxl-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .my-xxxl-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .my-xxxl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-xxxl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .my-xxxl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .my-xxxl-6 {
        margin-top: 4rem !important;
        margin-bottom: 4rem !important;
    }

    .my-xxxl-7 {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }

    .my-xxxl-8 {
        margin-top: 6rem !important;
        margin-bottom: 6rem !important;
    }

    .my-xxxl-9 {
        margin-top: 7rem !important;
        margin-bottom: 7rem !important;
    }

    .m-xxxl-auto {
        margin: auto !important;
    }

    .mx-xxxl-auto {
        margin: 0 auto !important;
    }

    .my-xxxl-auto {
        margin: auto 0 !important;
    }

    .p-xxxl-0 {
        padding: 0 !important;
    }

    .p-xxxl-1 {
        padding: 0.25rem !important;
    }

    .p-xxxl-2 {
        padding: 0.5rem !important;
    }

    .p-xxxl-3 {
        padding: 1rem !important;
    }

    .p-xxxl-4 {
        padding: 1.5rem !important;
    }

    .p-xxxl-5 {
        padding: 3rem !important;
    }

    .p-xxxl-6 {
        padding: 4rem !important;
    }

    .p-xxxl-7 {
        padding: 5rem !important;
    }

    .p-xxxl-8 {
        padding: 6rem !important;
    }

    .p-xxxl-9 {
        padding: 7rem !important;
    }

    .pt-xxxl-0 {
        padding-top: 0 !important;
    }

    .pt-xxxl-1 {
        padding-top: 0.25rem !important;
    }

    .pt-xxxl-2 {
        padding-top: 0.5rem !important;
    }

    .pt-xxxl-3 {
        padding-top: 1rem !important;
    }

    .pt-xxxl-4 {
        padding-top: 1.5rem !important;
    }

    .pt-xxxl-5 {
        padding-top: 3rem !important;
    }

    .pt-xxxl-6 {
        padding-top: 4rem !important;
    }

    .pt-xxxl-7 {
        padding-top: 5rem !important;
    }

    .pt-xxxl-8 {
        padding-top: 6rem !important;
    }

    .pt-xxxl-9 {
        padding-top: 7rem !important;
    }

    .pb-xxxl-0 {
        padding-bottom: 0 !important;
    }

    .pb-xxxl-1 {
        padding-bottom: 0.25rem !important;
    }

    .pb-xxxl-2 {
        padding-bottom: 0.5rem !important;
    }

    .pb-xxxl-3 {
        padding-bottom: 1rem !important;
    }

    .pb-xxxl-4 {
        padding-bottom: 1.5rem !important;
    }

    .pb-xxxl-5 {
        padding-bottom: 3rem !important;
    }

    .pb-xxxl-6 {
        padding-bottom: 4rem !important;
    }

    .pb-xxxl-7 {
        padding-bottom: 5rem !important;
    }

    .pb-xxxl-8 {
        padding-bottom: 6rem !important;
    }

    .pb-xxxl-9 {
        padding-bottom: 7rem !important;
    }

    .ps-xxxl-0 {
        padding-left: 0rem !important;
    }

    .ps-xxxl-1 {
        padding-left: 0.25rem !important;
    }

    .ps-xxxl-2 {
        padding-left: 0.5rem !important;
    }

    .ps-xxxl-3 {
        padding-left: 1rem !important;
    }

    .ps-xxxl-4 {
        padding-left: 1.5rem !important;
    }

    .ps-xxxl-5 {
        padding-left: 3rem !important;
    }

    .ps-xxxl-6 {
        padding-left: 4rem !important;
    }

    .ps-xxxl-7 {
        padding-left: 5rem !important;
    }

    .ps-xxxl-8 {
        padding-left: 6rem !important;
    }

    .ps-xxxl-9 {
        padding-left: 7rem !important;
    }

    .pe-xxxl-0 {
        padding-right: 0 !important;
    }

    .pe-xxxl-1 {
        padding-right: 0.25rem !important;
    }

    .pe-xxxl-2 {
        padding-right: 0.5rem !important;
    }

    .pe-xxxl-3 {
        padding-right: 1rem !important;
    }

    .pe-xxxl-4 {
        padding-right: 1.5rem !important;
    }

    .pe-xxxl-5 {
        padding-right: 3rem !important;
    }

    .pe-xxxl-6 {
        padding-right: 4rem !important;
    }

    .pe-xxxl-7 {
        padding-right: 5rem !important;
    }

    .pe-xxxl-8 {
        padding-right: 6rem !important;
    }

    .pe-xxxl-9 {
        padding-right: 7rem !important;
    }

    .px-xxxl-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .px-xxxl-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .px-xxxl-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .px-xxxl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .px-xxxl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .px-xxxl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .px-xxxl-6 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }

    .px-xxxl-7 {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }

    .px-xxxl-8 {
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }

    .px-xxxl-9 {
        padding-left: 7rem !important;
        padding-right: 7rem !important;
    }

    .py-xxxl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .py-xxxl-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .py-xxxl-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .py-xxxl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-xxxl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-xxxl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .py-xxxl-6 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .py-xxxl-7 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .py-xxxl-8 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }

    .py-xxxl-9 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }

    .p-xxxl-auto {
        padding: auto !important;
    }

    .px-xxxl-auto {
        padding: 0 auto !important;
    }

    .py-xxxl-auto {
        padding: auto 0 !important;
    }
}


/* margin & padding end */


/* background-color start */

.bg-black-1,
.bg-black {
    background: #000 !important;
}

.bg-white-1,
.bg-light {
    background: #fff !important;
}

.bg-gray-1 {
    background: #f5f5f5 !important;
}

.bg-gray-2 {
    background: #dbdbdb !important;
}

.bg-gray-3,
.bg-lightgray {
    background: #b8b8b8 !important;
}

.bg-gray-4 {
    background: #a8a8a8 !important;
}

.bg-gray-5 {
    background: #8a8a8a !important;
}

.bg-gray-6 {
    background: #787878 !important;
}

.bg-gray-7 {
    background: #5c5c5c !important;
}

.bg-gray-8,
.bg-lightblack {
    background: #525252 !important;
}

.bg-gray-9 {
    background: #383838 !important;
}

.bg-gray-10 {
    background: #1f1f1f !important;
}

.bg-gray-11,
.bg-darkblack {
    background: #0f0f0f !important;
}

.bg-orange-1 {
    background: #38241d !important;
}

.bg-orange-2 {
    background: #ff855c !important;
}

.bg-orange-3,
.bg-orange {
    background: #ff602a !important;
}

.bg-purple-1 {
    background: #251166 !important;
}

.bg-purple-2 {
    background: #825cff !important;
}

.bg-purple-3 {
    background: #5c2aff !important;
}

.bg-red-1 {
    background: #ff2828 !important;
}

.bg-red-2 {
    background: #ff3333 !important;
}

.bg-green-1 {
    background: #00fa2a !important;
}

.bg-enable {
    background: #0d6efd !important;
}

.bg-badge-active {
    background: #737373 !important;
}

.bg-transparent {
    background: transparent !important;
}


/* background-color end */


/* text-color start */

.text-black-1,
.text-black {
    color: #000 !important;
}

.text-white-1,
.text-light {
    color: #fff !important;
}

.text-gray-1 {
    color: #f5f5f5 !important;
}

.text-gray-2 {
    color: #dbdbdb !important;
}

.text-gray-3,
.text-lightgray {
    color: #b8b8b8 !important;
}

.text-gray-4 {
    color: #a8a8a8 !important;
}

.text-gray-5 {
    color: #8a8a8a !important;
}

.text-gray-6 {
    color: #787878 !important;
}

.text-gray-7 {
    color: #5c5c5c !important;
}

.text-gray-8,
.text-lightblack {
    color: #525252 !important;
}

.text-gray-9 {
    color: #383838 !important;
}

.text-gray-10 {
    color: #1f1f1f !important;
}

.text-gray-11,
.text-darkblack {
    color: #0f0f0f !important;
}

.text-gray-12,
.text-page-none {
    color: #757575 !important;
}

.text-orange-1 {
    color: #38241d !important;
}

.text-orange-2 {
    color: #ff855c !important;
}

.text-orange-3,
.text-orange {
    color: #ff602a !important;
}

.text-purple-1 {
    color: #251166 !important;
}

.text-purple-2 {
    color: #825cff !important;
}

.text-purple-3 {
    color: #5c2aff !important;
}

.text-red-1 {
    color: #ff2828 !important;
}

.text-red-2 {
    color: #EB3838 !important;
}

.text-green-1 {
    color: #00fa2a !important;
}


/* text-color end */


/* font-size start */

.font-260 {
    font-size: 2.6rem;
}

.font-250 {
    font-size: 2.5rem;
    line-height: 48px;
}

.font-240 {
    font-size: 2.375rem;
    line-height: 46px;
}

.font-230 {
    font-size: 2.3rem;
    line-height: 44px;
}

.font-220 {
    font-size: 2.25rem;
    line-height: 42px;
}

.font-210 {
    font-size: 2.1rem;
    line-height: 38px;
}

.font-200 {
    font-size: 2rem;
    line-height: 38px;
}

.font-190 {
    font-size: 1.875rem;
    line-height: 36px;
}

.font-180 {
    font-size: 1.8rem;
    line-height: 34px;
}

.font-170 {
    font-size: 1.75rem;
    line-height: 34px;
}

.font-160 {
    font-size: 1.625rem;
    line-height: 32px;
}

.font-150 {
    font-size: 1.5rem;
    line-height: 30px;
}

.font-140 {
    font-size: 1.375rem;
    line-height: 26px;
}

.font-130 {
    font-size: 1.3rem;
    line-height: 24px;
}

.font-120 {
    font-size: 1.25rem;
    line-height: 24px;
}

.font-110 {
    font-size: 1.125rem;
    line-height: 22px;
}

.font-100 {
    font-size: 1rem;
    line-height: 20px;
}

.font-095 {
    font-size: 0.95rem;
    line-height: 18px;
}

.font-090 {
    font-size: 0.875rem;
    line-height: 18px;
}

.font-085 {
    font-size: 0.85rem;
    line-height: 16px;
}

.font-080 {
    font-size: 0.8rem;
    line-height: 14px;
}

.font-075 {
    font-size: 0.75rem;
}

.font-070 {
    font-size: 0.7rem;
}

.font-060 {
    font-size: 0.6rem;
}


/* font-size 0.6 (0.6rem) 밑은 적용안됨 */


/* font-size end */


/* font-weight start */

.fw-r {
    font-weight: 400;
}

.fw-m {
    font-weight: 500;
}

.fw-sb {
    font-weight: 600;
}

.fw-b {
    font-weight: 700;
}


/* font-weight end */


/* border-radius start */

.border-radius-top {
    border-start-end-radius: 8px !important;
    border-start-start-radius: 8px !important;
}

.border-radius-bottom {
    border-end-start-radius: 8px !important;
    border-end-end-radius: 8px !important;
}

.border-radius-left {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.border-radius-right {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.border-hard-radius-top {
    border-start-end-radius: 20px !important;
    border-start-start-radius: 20px !important;
}

.border-hard-radius-bottom {
    border-end-start-radius: 20px !important;
    border-end-end-radius: 20px !important;
}

.border-hard-radius-left {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px;
}

.border-hard-radius-right {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.border-radius-all {
    border-start-end-radius: 8px !important;
    border-start-start-radius: 8px !important;
    border-end-start-radius: 8px !important;
    border-end-end-radius: 8px !important;
}

.border-hard-radius-all {
    border-start-end-radius: 20px !important;
    border-start-start-radius: 20px !important;
    border-end-start-radius: 20px !important;
    border-end-end-radius: 20px !important;
}


/* border-radius end */


/* custom-container start */

.container-custom-90 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.container-custom-85 {
    width: 85%;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    margin-left: auto;
    margin-right: auto;
}

.container-custom-80 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.container-custom-70 {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.container-custom-60 {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.container-custom-50 {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.container-custom-40 {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1800px) {
    .container-custom-70 {
        width: 90%;
        padding: 0 1rem;
        margin: 0 3rem;
    }

    h4 {
        font-size: 1.1rem;
    }
}

@media (max-width: 767px) {
    .container-custom-90 {
        width: 100%;
        padding: 0 1rem;
    }

    .container-custom-85 {
        width: 100%;
        padding: 0 1rem;
    }

    .container-custom-80 {
        width: 100%;
        padding: 0 1rem;
    }

    .container-custom-70 {
        width: 100%;
        padding: 0 1rem;
        margin: 0;
    }

    .container-custom-60 {
        width: 100%;
        padding: 0 1rem;
    }

    .container-custom-50 {
        width: 100%;
        padding: 0 1rem;
    }
}


/* custom-container end */


/* custom-col start */

@media (min-width:1600px) {
    .col-xxxl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xxxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xxxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xxxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xxxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xxxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xxxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xxxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xxxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xxxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xxxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xxxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xxxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}


/* custom-col end */


/* 추가적인 CSS 작업은 아래에서 진행 */

/* 로그인 회원가입 login join 페이지 시작 */

/* 로그인 회원가입 login join 페이지 끝 */

/* 메인 페이지 시작 */

#carouselSlide .carousel-item .carousel-control-prev-icon, .carousel-control-next-icon {
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7));
}

@media (max-width:768px) {

    .subCampain-right {
        height: auto !important;
        margin-bottom: 3rem;
    }
}

@media (max-width:991px) {
    .teacher_name {
        font-size: 40px;
    }
}

@media (min-width:992px) {
    .teacher_name {
        font-size: 80px;
    }
}

@media (max-width:576px) {
    .gold-medal {
        height: 90px;
    }

    .silver-medal {
        height: 60px;
    }

    .bronze-medal {
        height: 60px;
    }
}

@media (min-width:577px) and (max-width:768px) {
    .gold-medal {
        height: 110px;
    }

    .silver-medal {
        height: 70px;
    }

    .bronze-medal {
        height: 70px;
    }
}

@media (min-width:769px) and (max-width:992px) {
    .gold-medal {
        height: 150px;
    }

    .silver-medal {
        height: 90px;
    }

    .bronze-medal {
        height: 90px;
    }
}

@media (min-width:993px) and (max-width:1200px) {
    .gold-medal {
        height: 150px;
    }

    .silver-medal {
        height: 110px;
    }

    .bronze-medal {
        height: 110px;
    }
}

@media (min-width:1201px) and (max-width:1400px) {
    .gold-medal {
        height: 110px;
    }

    .silver-medal {
        height: 70px;
    }

    .bronze-medal {
        height: 70px;
    }
}

@media (min-width:1401px) {
    .gold-medal {
        height: 130px;
    }

    .silver-medal {
        height: 90px;
    }

    .bronze-medal {
        height: 90px;
    }
}

/* 메인 페이지 끝 */


/* 마이페이지 시작 */
section#comments div.media.reply {
    position: relative;
}

section#comments div.media.reply::before {
    position: absolute;
    top: 10px;
    left: -50px;
    font-size: 2rem;
    transform: rotate(180deg) translateY(50%);
    font-family: "bootstrap-icons";
    content: "\F51F";
}

/* 마이페이지 끝 */


/* 상세페이지 */
#scrollspyHeading1 img {
    max-width: 100%;
    height: auto !important;
}

#lecture_detail ul li {
    padding:
}

.detail-bar li {
    list-style: none;
}

.detail-bar {
    position: sticky;
    top: 68px;
}

.lecture-bottom-sheet {
    position: sticky;
    right: 0%;
    margin-top: 10.3rem;
}

.lecture-bottom-sheet .border-tb {
    border-top: 1px solid #b5b5b5;
    border-bottom: 1px solid #b5b5b5;
}

.lecture-floating-box {
    position: sticky;
    right: 0%;
    top: 68px;
}

.lecture-floating-box .border-tb {
    border-top: 1px solid #b5b5b5;
    border-bottom: 1px solid #b5b5b5;
}

.lecture-floating {
    position: sticky;
    display: block;
    top: 70px;
    width: 340px;
    height: 570px;
    max-height: 570px;
}

.lecture-floating i {
    background: #000 !important;
}

.lecture-con-title {
    font-size: 2rem;
}

.navbar-title {
    font-size: 1.5rem;
}

.sale-amount {
    text-decoration: line-through;
}

.lecture-review-bg {
    background: #ff9267;
}

.lecture-people-bg {
    background: #d4a3f9;
}

.lecture-level-bg {
    background: #3eb2ff;
}

.PDF-data {
    background: linear-gradient(92.28deg, #FF9E9E 0%, #FF6C6C 100%);
    border-radius: 8px;
    text-shadow: 0px 2px 6px #D15252;
}

.EXCEL-data {
    background: linear-gradient(92.28deg, #73EA85 0%, #09B419 100%);
    border-radius: 8px;
    text-shadow: 0px 2px 6px #14721D;
}

.JPG-data {
    background: linear-gradient(92.28deg, #95CCFF 0%, #007BEC 100%);
    border-radius: 8px;
    text-shadow: 0px 2px 6px #265681;
}

.DOC-data {
    background: linear-gradient(92.28deg, #8A96FF 0%, #5E62FF 100%);
    border-radius: 8px;
    text-shadow: 0px 2px 6px #333693;
}

.PPT-data {
    background: linear-gradient(92.28deg, #FF9E9E 0%, #FF8C09 100%);
    border-radius: 8px;
    text-shadow: 0px 2px 6px #BB603A;
}

.HWP-data {
    background: linear-gradient(92.28deg, #ff9c9c 0%, #FF6C6C 100%);
    border-radius: 8px;
    text-shadow: 0px 2px 6px #D15252;
}

.MP4-data {
    background: linear-gradient(92.28deg, #73EA85 0%, #09B419 100%);
    border-radius: 8px;
    text-shadow: 0px 2px 6px #14721D;
}

.XLSX-data {
    background: linear-gradient(92.28deg, #73EA85 0%, #09B419 100%);
    border-radius: 8px;
    text-shadow: 0px 2px 6px #14721D;
}

#scrollspyHeading1 {
    margin-top: 1rem;
    padding-top: 68px;
}

#scrollspyHeading2 {
    margin-top: 4rem;
    padding-top: 88px;
}

#scrollspyHeading5, #scrollspyHeading4 {
    padding-bottom: 5rem;
}

#scrollspyHeading3,
#scrollspyHeading4,
#scrollspyHeading5 {
    margin-top: 4rem;
    padding-top: 68px;
}

#scrollspyHeading1 .class-info {
    /* word-break: keep-all; */
}

#scrollspyHeading1 .power-text {
    background: #FF602A !important;
}

#lecturedetail .nav-item .nav-link.active {
    border-bottom: 4px solid #fff !important;
}


/*이 페이지만 적용*/
#lecture-detail .lecture-detail-side {
    width: 340px !important;
}

@media (max-width: 1400px) {
    .container-custom-70 {
        width: 100%;
        padding: 0 1rem;
        margin: 0 auto;
    }

    h4 {
        font-size: 1.1rem;
    }
}

@media (max-width:1199px) {
    .lecture-floating-box {
        position: sticky;
        right: 0%;
        bottom: 0 !important;
        top: auto;
    }

    .nav {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .nav .nav-item {
        white-space: nowrap !important;
    }
}

/*이 페이지만 적용*/

/* 상단 영상/이미지 영역 top-layout*/
.tags .item {
    margin-right: 0.9375rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #737373;
}

.tags .item:hover {
    background: rgba(111, 111, 111, 0.3);
}


/* 상세페이지 introduce */
.lecture-content {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.lecture-content img {
    margin-bottom: 1rem !important;
    margin-top: 2rem !important;
}

@media (max-width:768px) {
    .content-title {
        font-size: 1.7rem !important;
        line-height: normal !important;
    }

    .content-title span {
        font-size: inherit !important;
    }

    .lecture-content img {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width:769px) {
    .content-title {
        font-size: 1.9rem !important;
        line-height: normal !important;
    }
}


.img-div img {
    height: auto;
}


#sub-explain-content-box img {
    width: 100% !important;
    height: auto !important;
}

.no-rounded img {
    border-radius: 0 !important;
}

.lecture-file strong {
    font-size: 1.1rem;
}

.lecture-file span.font-150 {
    font-size: 1.5rem !important;
}

.lecture-file.draggable span {
    font-weight: 700 !important;
}

.lecture-file.draggable b {
    font-weight: 700 !important;
}

@media (min-width:1201px) {
    .lecture-file {
        flex-wrap: wrap;
        display: flex;
    }
}

@media (max-width: 1200px) {
    .lecture-file {
        display: flex !important;
        overflow-x: hidden !important;
        justify-content: flex-start !important;
        white-space: nowrap !important;
    }

    .lecture-file div {
        white-space: nowrap !important;
    }
}

@media (max-width:768px) {
    .file-title-mo {
        font-size: 1.5rem !important;
    }
}

#sub-explain-content-box .lecture-content {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

/* 강사 소개 */
.teacher-history * {
    font-size: 1rem !important;
}


/* 커리큘럼 curriculum */
.lb-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    line-height: 24px;
    font-weight: 700;
    text-shadow: 0px 2px 16px #000
}

@media (min-width: 768px) {
    .curriculum_image img {}

    .lb-text {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.lb-wrap {
    position: relative;
}

.lb-wrap img {
    width: 100%;
    vertical-align: middle;
}

/*FAQ*/
.collapsed .bi.bi-chevron-down::before {
    transform: rotate(0deg) !important;
}

.bi.bi-chevron-down::before {
    transform: rotate(180deg) !important;
    transition: transform 0.3s ease;
}

.open-toggle .icon-arrow_forward_ios::before {
    transform: rotate(270deg);
    transition: transform 0.3s ease;
    display: inline-block;
}

.open-toggle.collapsed .icon-arrow_forward_ios::before {
    transform: rotate(90deg) !important;
    display: inline-block;
}

.bottom-sheet-handle .icon-arrow_forward_ios::before {
    transform: rotate(270deg);
    transition: transform 0.3s ease;
    display: inline-block;
}

.bottom-sheet-handle.active .icon-arrow_forward_ios::before {
    transform: rotate(90deg) !important;
    display: inline-block;
}

/* 모바일 바텀시트 */
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: auto !important;
}

.bottom-sheet-handle {
    position: absolute;
    bottom: 100%;
    width: 100%;
    height: min-content;
    color: #000;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    transition: transform 0.45s ease-in-out;
}

.bottom-sheet-content {
    padding: 20px;
    overflow-y: none;
    display: none;
}

p {
    margin: 0;
}


/* 상세페이지 끝 */


/* 커뮤니티 시작 */
.fixbottm {
    font-size: 0.90rem;
    line-height: 20px;
    max-height: 140px;
    min-height: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.mask-img-main-page, .image {
    width: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    cursor: pointer;
}

.list-badge {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #737373;
    border-radius: 25px;
    /* border-radius: 8px; */

}

.list-title {

    text-align: center;
}

.like-badge {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #737373;
    border-radius: 25px;
    /* border-radius: 8px; */
}

.mask-img-main-page {
    width: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.community-content {
    color: #131313;
}


.list-badge {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.list-title {
    text-align: center;
}

.like-badge {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #737373;
    border-radius: 25px;
}

.font-resize {
    font-size: 1.3rem;
}

@media (max-width:767px) {
    .mask-img-main-page {
        height: 140px;
    }

    .re-comment {
        font-size: 0.8rem;
    }

    iframe {
        width: 100%;
    }

    .community-title {
        font-size: 1.5rem !important;
    }

    .view-con-custom-70 {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .font-resize {
        font-size: 1.0rem;
    }

}

@media (min-width:768px) {
    .mask-img-main-page {
        height: 160px;
    }

    .re-comment {
        font-size: 0.9rem;
    }
}

@media (min-width:1400px) {
    .mask-img-main-page {
        height: 200px;
    }

    .re-comment {
        font-size: 1rem;
    }
}

.entry-content img {
    max-width: 100%;
    height: auto !important;
}

.entry-content {
    line-height: 1.5;
}


section.comments div.media.reply {
    position: relative;
}

section.comments div.media.reply::before {
    position: absolute;
    top: -5px;
    left: -35px;
    font-size: 1.5rem;

    font-family: "bootstrap-icons";
    content: "\F132";
}

.co-title-overflow {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
}

.co-title-overflow-one {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-word;
}

#reply_div * {
    font-family: 'Pretendard' !important;
}

/*커뮤니티 헤더 내부에 있는 community 글자에만 사용*/

@media (min-width: 617px) {
    .community-font-2 {
        font-size: 5.5rem;
        opacity: 0.15;
    }
}

@media (max-width: 616px) {
    .community-font-1 {
        padding-top: 1.25rem;
        font-size: 2.5rem;
        opacity: 0.15;
    }
}

/* 커뮤니티 끝 */



/** Start: Custom Select2 */
.select2-selection, .select2-search__field {
    border-radius: 0 !important;
    margin: 0 !important;
    color: #000
}

.input-group-sm .select2-selection, .input-group-sm .select2-search__field {
    font-size: 0.75rem;
}

.select2-search--dropdown {
    padding: 0.1rem 0.2rem !important;
    font-size: 0.75rem;
}

.select2-search--dropdown .select2-search__field {
    border: 0;
    padding-left: 1.9rem;
    padding-right: 0.5rem;
}

.select2-dropdown .select2-results {
    font-size: 0.75rem;
}

.select2-search--dropdown::after {
    left: 0.5rem;
}

.select2-sm .select2-selection__rendered {
    padding: 0.1rem 0.2rem;
}

.select2-sm .select2-selection__choice {
    font-size: 0.85rem;
    margin: 0 0.2rem 0.1rem 0;
}

/* Yun 추가*/
.select2-container {
    color: black;
}

.height-fix {
    margin-top: -68px !important;
    padding-top: 68px !important;
}

/*프로모션 배경용*/
.bg-gradient-campaign {
    background: linear-gradient(90deg, #5C2AFF 0%, #FF602A 100%)
}

.co-title-overflow-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-word;
}

/* 문장 2줄 이후 말줄임 처리 */

.sentence-line-2 {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}





/* 라이트모드 적용 후 */
body {
    transition: background-color 0s, color 0s !important;
}

body.light-mode {
    transition: background-color 0s, color 0s !important;
}

body.light-mode header {
    background: #fff;
    color: #0f0f0f;
}

body.light-mode #search_title {
    background: #fff;
    color: #0f0f0f;
}

body.light-mode #search_title::placeholder {
    color: #0f0f0f;
}

body.light-mode div.contents div.navigation {
    background: #fff;
}

body.light-mode div.contents div.navigation .nav-link {
    color: #0f0f0f !important;
}

body.light-mode div.contents div.navigation .footer {
    background: #fff;
}

body.light-mode div.contents .text-white,
body.light-mode div.contents .text-white-1 {
    color: #000 !important;
}

body.light-mode div.contents .bg-gray-11 {
    background-color: #f8f9fa !important;
}

body.light-mode div.contents .ctgr {
    background-color: #0f0f0f !important;
}

body.light-mode div.contents .ctgr a {
    color: #f8f9fa !important;
}

body.light-mode div.contents .like-badge a {
    color: #0f0f0f !important;
}

body.light-mode div.contents .top-menu-active a {
    color: #ff602a !important;
}

body.light-mode div.contents .community-custom-content,
body.light-mode div.contents .community-custom-write,
body.light-mode div.contents .community-custom-date {
    color: #0f0f0f !important;
}

body.light-mode div.contents .entry-content {
    color: #0f0f0f !important;
}

body.light-mode header {
    background-color: #fff !important;
}

body.light-mode .contents .icon-arrow_back_ios_new {
    color: #000 !important;
}

body.light-mode .contents .text-white, .text-white-1 {
    color: #fff !important;
}

body.light-mode .contents .community-custom-list-badge {
    background: #ffe0d6 !important;
    color: #ff602a !important;
    border: 0;
}

body.light-mode .custom-footer .navigation li a {
    color: #0f0f0f !important;
}

body.light-mode .contents .like-badge {
    background: 0;
    border: 0;
    color: #000;
}

@media (max-width:767px) {
    .contents .container-custom-60 .community-custom-list-badge {
        margin-bottom: auto !important;
        margin-top:0 !important;
        flex: 0 0 auto;
        width: auto;
    }
    body.light-mode .community-custom-view-bottom {background:#fff !important;}
    body.light-mode .community-custom-view-bottom .reply-scroll{color:#000 !important;}
    body.light-mode .community-custom-view-bottom [class*="like-container"][class*="_m"] a {
        color: #000 !important;
    }
}

body.light-mode .page-item.active a {
    background: #ff602a !important;
    color: #fff !important;
}

.bg-gray-11 {
    background-color: #1a1a1a !important;
}

.ctgr {
    background-color: #f8f9fa !important;
}

.ctgr a {
    color: #0f0f0f !important;
}

.like-badge a {
    color: #f8f9fa !important;
}

.top-menu-active a {
    color: #fff !important;
}

.community-custom-content,
.community-custom-write,
.community-custom-date {
    color: #b8b8b8 !important;
}

.entry-content {
    color: #fff !important;
}


header {
    background-color: #0f0f0f !important;
}

/* 공통 스타일 */
.tag-style a {
    color: #ff602a !important;
}