/* 공백 start */
.clear-5 {
    height: 5px;
}
.clear-10 {
    height: 10px;
}
.clear-15 {
    height: 15px;
}
.clear-20 {
    height: 20px;
}
.clear-25 {
    height: 25px;
}
.clear-30 {
    height: 30px;
}
.clear-35 {
    height: 35px;
}
.clear-40 {
    height: 40px;
}
.clear-45 {
    height: 45px;
}
.clear-50 {
    height: 50px;
}
.clear-55 {
    height: 55px;
}
.clear-60 {
    height: 60px;
}
.clear-65 {
    height: 65px;
}
.clear-70 {
    height: 70px;
}
.clear-75 {
    height: 75px;
}
.clear-80 {
    height: 80px;
}
.clear-85 {
    height: 85px;
}
.clear-90 {
    height: 90px;
}
.clear-95 {
    height: 95px;
}
.clear-100 {
    height: 100px;
}
.clear-110 {
    height: 110px;
}
.clear-120 {
    height: 120px;
}
.clear-130 {
    height: 130px;
}
.clear-140 {
    height: 140px;
}
.clear-150 {
    height: 150px;
}
.clear-160 {
    height: 160px;
}
.clear-170 {
    height: 170px;
}
.clear-180 {
    height: 180px;
}
.clear-190 {
    height: 190px;
}
.clear-200 {
    height: 200px;
}
.clear-210 {
    height: 210px;
}
.clear-220 {
    height: 220px;
}
.clear-230 {
    height: 230px;
}
.clear-240 {
    height: 240px;
}
.clear-250 {
    height: 250px;
}
.clear-260 {
    height: 260px;
}
.clear-270 {
    height: 270px;
}
.clear-280 {
    height: 280px;
}
.clear-290 {
    height: 290px;
}
.clear-300 {
    height: 300px;
}

/* 공백 end */

/* 폰트 크기 start */
.font-xs {
    font-size: var(--font-xsmall-size);
}
.font-sm {
    font-size: var(--font-small-size);
}
.font-md {
    font-size: var(--font-medium-size);
}
.font-lg {
    font-size: var(--font-large-size);
}
.font-xl {
    font-size: var(--font-xlarge-size);
}
.font-xxl {
    font-size: var(--font-xxlarge-size);
}
.font-xxxl {
    font-size: var(--font-xxxlarge-size);
}
/* 폰트 크기 end */

/** 폰트 두께 start */
.font-500 {
    font-weight: 500;
}
.font-600 {
    font-weight: 600;
}
.font-700 {
    font-weight: 700;
}
.font-800 {
    font-weight: 800;
}
.font-900 {
    font-weight: 900;
}
/** 폰트 두께 end */

/* square start */
.square-20 {
    width: 20px;
    height: 20px;
}

.square-25 {
    width: 25px;
    height: 25px;
}

.square-30 {
    width: 30px;
    height: 30px;
}

.square-35 {
    width: 35px;
    height: 35px;
}

.square-40 {
    width: 40px;
    height: 40px;
}

.square-45 {
    width: 45px;
    height: 45px;
}

.square-50 {
    width: 50px;
    height: 50px;
}

.square-55 {
    width: 55px;
    height: 55px;
}

.square-60 {
    width: 60px;
    height: 60px;
}

.square-65 {
    width: 65px;
    height: 65px;
}

.square-70 {
    width: 70px;
    height: 70px;
}

.square-75 {
    width: 75px;
    height: 75px;
}

.square-80 {
    width: 80px;
    height: 80px;
}

.square-85 {
    width: 85px;
    height: 85px;
}

.square-90 {
    width: 90px;
    height: 90px;
}

.square-95 {
    width: 95px;
    height: 95px;
}

.square-100 {
    width: 100px;
    height: 100px;
}

.square-110 {
    width: 110px;
    height: 110px;
}

.square-120 {
    width: 120px;
    height: 120px;
}

.square-130 {
    width: 130px;
    height: 130px;
}
.square-140 {
    width: 140px;
    height: 140px;
}

.square-150 {
    width: 150px;
    height: 150px;
}

.square-160 {
    width: 160px;
    height: 160px;
}

.square-170 {
    width: 170px;
    height: 170px;
}

.square-180 {
    width: 180px;
    height: 180px;
}

.square-190 {
    width: 190px;
    height: 190px;
}

.square-200 {
    width: 200px;
    height: 200px;
}
.square-220 {
    width: 220px;
    height: 220px;
}

.square-240 {
    width: 240px;
    height: 240px;
}

.square-260 {
    width: 260px;
    height: 260px;
}

.square-280 {
    width: 280px;
    height: 280px;
}

.square-300 {
    width: 300px;
    height: 300px;
}

.square-400 {
    width: 400px;
    height: 400px;
}

.square-500 {
    width: 500px;
    height: 500px;
}
/* square end */

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* background color start */
.bg-disabled {
    background-color: #f7f7f7;
}
/* background color end */

/* width start */
.w-5 {
    width: 5%;
}
.w-10 {
    width: 10%;
}
.w-15 {
    width: 15%;
}
.w-20 {
    width: 20%;
}
.w-25 {
    width: 25%;
}
.w-30 {
    width: 30%;
}
.w-35 {
    width: 35%;
}
.w-40 {
    width: 40%;
}
.w-45 {
    width: 45%;
}
.w-50 {
    width: 50%;
}
.w-55 {
    width: 55%;
}
.w-60 {
    width: 60%;
}
.w-65 {
    width: 65%;
}
.w-70 {
    width: 70%;
}
.w-75 {
    width: 75%;
}
.w-80 {
    width: 80%;
}
.w-85 {
    width: 85%;
}
.w-90 {
    width: 90%;
}
.w-95 {
    width: 95%;
}
.w-100 {
    width: 100%;
}
/* width end */

/*height start */
.h-5 {
    height: 5px;
}
.h-10 {
    height: 10px;
}
.h-15 {
    height: 15px;
}
.h-20 {
    height: 20px;
}
.h-25 {
    height: 25px;
}
.h-30 {
    height: 30px;
}
.h-35 {
    height: 35px;
}
.h-40 {
    height: 40px;
}
.h-45 {
    height: 45px;
}
.h-50 {
    height: 50px;
}
.h-55 {
    height: 55px;
}
.h-60 {
    height: 60px;
}
.h-65 {
    height: 65px;
}
.h-70 {
    height: 70px;
}
.h-75 {
    height: 75px;
}
.h-80 {
    height: 80px;
}
.h-85 {
    height: 85px;
}
.h-90 {
    height: 90px;
}
.h-95 {
    height: 95px;
}
.h-100 {
    height: 100px;
}
/* height end */

/* max-width start */
.mxw-10p {
    max-width: 10px;
}
.mxw-20p {
    max-width: 20px;
}
.mxw-30p {
    max-width: 30px;
}
.mxw-40p {
    max-width: 40px;
}
.mxw-50p {
    max-width: 50px;
}
.mxw-60p {
    max-width: 60px;
}
.mxw-70p {
    max-width: 70px;
}
.mxw-80p {
    max-width: 80px;
}
.mxw-90p {
    max-width: 90px;
}
.mxw-100p {
    max-width: 100px;
}
.mxw-110p {
    max-width: 110px;
}
.mxw-120p {
    max-width: 120px;
}
.mxw-130p {
    max-width: 130px;
}
.mxw-140p {
    max-width: 140px;
}
.mxw-150p {
    max-width: 150px;
}
.mxw-160p {
    max-width: 160px;
}
.mxw-170p {
    max-width: 170px;
}
.mxw-180p {
    max-width: 180px;
}
.mxw-190p {
    max-width: 190px;
}
.mxw-200p {
    max-width: 200px;
}
.mxw-220p {
    max-width: 220px;
}
.mxw-240p {
    max-width: 240px;
}
.mxw-260p {
    max-width: 260px;
}
.mxw-280p {
    max-width: 280px;
}
.mxw-300p {
    max-width: 300px;
}
.mxw-400p {
    max-width: 400px;
}
.mxw-500p {
    max-width: 500px;
}
.mxw-600p {
    max-width: 600px;
}
.mxw-700p {
    max-width: 700px;
}
.mxw-800p {
    max-width: 800px;
}
.mxw-900p {
    max-width: 900px;
}
.mxw-1000p {
    max-width: 1000px;
}
/* max-width end */

/* max-height start */
.mxh-10p {
    max-height: 10px;
}
.mxh-20p {
    max-height: 20px;
}
.mxh-30p {
    max-height: 30px;
}
.mxh-40p {
    max-height: 40px;
}
.mxh-50p {
    max-height: 50px;
}
.mxh-60p {
    max-height: 60px;
}
.mxh-70p {
    max-height: 70px;
}
.mxh-80p {
    max-height: 80px;
}
.mxh-90p {
    max-height: 90px;
}
.mxh-100p {
    max-height: 100px;
}
.mxh-110p {
    max-height: 110px;
}
.mxh-120p {
    max-height: 120px;
}
.mxh-130p {
    max-height: 130px;
}
.mxh-140p {
    max-height: 140px;
}
.mxh-150p {
    max-height: 150px;
}
.mxh-160p {
    max-height: 160px;
}
.mxh-170p {
    max-height: 170px;
}
.mxh-180p {
    max-height: 180px;
}
.mxh-190p {
    max-height: 190px;
}
.mxh-200p {
    max-height: 200px;
}
.mxh-220p {
    max-height: 220px;
}
.mxh-240p {
    max-height: 240px;
}
.mxh-260p {
    max-height: 260px;
}
.mxh-280p {
    max-height: 280px;
}
.mxh-300p {
    max-height: 300px;
}
.mxh-400p {
    max-height: 400px;
}
.mxh-500p {
    max-height: 500px;
}
.mxh-600p {
    max-height: 600px;
}
.mxh-700p {
    max-height: 700px;
}
.mxh-800p {
    max-height: 800px;
}
.mxh-900p {
    max-height: 900px;
}
.mxh-1000p {
    max-height: 1000px;
}
/* max-height end */

/* min-width start */
.mnw-10p {
    min-width: 10px;
}
.mnw-20p {
    min-width: 20px;
}
.mnw-30p {
    min-width: 30px;
}
.mnw-40p {
    min-width: 40px;
}
.mnw-50p {
    min-width: 50px;
}
.mnw-60p {
    min-width: 60px;
}
.mnw-70p {
    min-width: 70px;
}
.mnw-80p {
    min-width: 80px;
}
.mnw-90p {
    min-width: 90px;
}
.mnw-100p {
    min-width: 100px;
}
.mnw-110p {
    min-width: 110px;
}
.mnw-120p {
    min-width: 120px;
}
.mnw-130p {
    min-width: 130px;
}
.mnw-140p {
    min-width: 140px;
}
.mnw-150p {
    min-width: 150px;
}
.mnw-160p {
    min-width: 160px;
}
.mnw-170p {
    min-width: 170px;
}
.mnw-180p {
    min-width: 180px;
}
.mnw-190p {
    min-width: 190px;
}
.mnw-200p {
    min-width: 200px;
}
.mnw-220p {
    min-width: 220px;
}
.mnw-240p {
    min-width: 240px;
}
.mnw-260p {
    min-width: 260px;
}
.mnw-280p {
    min-width: 280px;
}
.mnw-300p {
    min-width: 300px;
}
.mnw-400p {
    min-width: 400px;
}
.mnw-500p {
    min-width: 500px;
}
.mnw-600p {
    min-width: 600px;
}
.mnw-700p {
    min-width: 700px;
}
.mnw-800p {
    min-width: 800px;
}
.mnw-900p {
    min-width: 900px;
}
.mnw-1000p {
    min-width: 1000px;
}
/* min-width end */

/* min-height start */
.mnh-10p {
    min-height: 10px;
}
.mnh-20p {
    min-height: 20px;
}
.mnh-30p {
    min-height: 30px;
}
.mnh-40p {
    min-height: 40px;
}
.mnh-50p {
    min-height: 50px;
}
.mnh-60p {
    min-height: 60px;
}
.mnh-70p {
    min-height: 70px;
}
.mnh-80p {
    min-height: 80px;
}
.mnh-90p {
    min-height: 90px;
}
.mnh-100p {
    min-height: 100px;
}
.mnh-110p {
    min-height: 110px;
}
.mnh-120p {
    min-height: 120px;
}
.mnh-130p {
    min-height: 130px;
}
.mnh-140p {
    min-height: 140px;
}
.mnh-150p {
    min-height: 150px;
}
.mnh-160p {
    min-height: 160px;
}
.mnh-170p {
    min-height: 170px;
}
.mnh-180p {
    min-height: 180px;
}
.mnh-190p {
    min-height: 190px;
}
.mnh-200p {
    min-height: 200px;
}
.mnh-220p {
    min-height: 220px;
}
.mnh-240p {
    min-height: 240px;
}
.mnh-260p {
    min-height: 260px;
}
.mnh-280p {
    min-height: 280px;
}
.mnh-300p {
    min-height: 300px;
}
.mnh-400p {
    min-height: 400px;
}
.mnh-500p {
    min-height: 500px;
}
.mnh-600p {
    min-height: 600px;
}
.mnh-700p {
    min-height: 700px;
}
.mnh-800p {
    min-height: 800px;
}
.mnh-900p {
    min-height: 900px;
}
.mnh-1000p {
    min-height: 1000px;
}
/* min-height end */

/* 송주현 추가 유틸리티 */

.square-100-height-auto {
    width: 100px;
    height: auto;
}
.color-gray500 {
    color: #666d80;
}
.color-primary {
    color: var(--Primary-Blue, #0088fe);
}
.color-danger {
    color: #ff3300;
}
.wb-keep {
    word-break: keep-all;
}
.font-size-13 {
    font-size: 13px;
}
.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pb-safe {
    padding-bottom: 80px;
}
.color-bg-orange {
    background-color: #ff6f43;
}

.img-thumb-book {
    max-width: 90px;
    max-height: 90px;
    width: auto;
    height: auto;
    border-radius: 8px;
}
.img-thumb-voca {
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    border-radius: 6px;
}
.img-thumb-video {
    max-width: 106px;
    height: auto;
    border-radius: 10px;
}
.min-w-0 {
    min-width: 0;
}
.flex-1 {
    flex: 1;
}