.bold {
    font-family: 'Gmarket Sans';
}

.medium {
    font-family: 'GmarketSansMedium' !important;
}

.light {
    font-family: 'GmarketSansLight';
}

.p-medium {
    font-weight: 500;
}

.p-bold {
    font-weight: 700;
}

/* font color */

.r {
    color: #DC2626 !important;
}

.w {
    color: #FFF !important;
}

.y {
    color: #FFD78B !important;
}

.b {
   color: #171717 !important;
}

.w2 {
    color: #F5F5F5 !important;
}

.beige {
    color: #F6ECD9 !important;
}

.brown {
    color: #3D241A !important;
}

/* font size */
/* Gmarket, Pretendard */
.g140, .p140 {
    font-size: 96px;
    line-height: 125%; /* 125% */
    letter-spacing: -5.4px;
    text-align: center;
}

.g120, .p120 {
    font-size: 80px;
    line-height: 125%;
    letter-spacing: -4.5px;
    text-align: center;
}


.g100, .p100 {
    font-size: 64px;
    line-height: 100%;
    letter-spacing: -4px;
}

.g68, .p68 {
    font-size: 48px;
    line-height: 120%;
    letter-spacing: -3.28px;
}

.g60, .p60 {
    font-size: 40px;
    line-height: 125%;
    letter-spacing: -2.4px;
    text-align: center;
}

.g48, .p48 {
    font-size: 32px;
    line-height: 125%; /* 131.25% */
    letter-spacing: -2.88px;
    text-align: center;
}

.g40, .p40 {
    font-size: 28px;
    line-height: 125%;
    letter-spacing: -2.4px;
    text-align: center;
}

.g36, .p36 {
    font-size: 28px;
    line-height: 125%; /* 135.714% */
    letter-spacing: -2.4px;
    text-align: center;
}

.g32, .p32 {
    font-size: 24px;
    line-height: 160%;
    letter-spacing: -1.22px;
}

.g24, .g28 {
    font-size: 20px;
    line-height: 140%; 
    letter-spacing: -1.24px;
}

.g22, .p22 {
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -1.12px;
    text-align: center;
}

.g20, .p20 {
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 12px;
    text-align: center;
}

.g16, .p16 {
    font-size: 14px;
    line-height: 160%; /* 25.6px */
    letter-spacing: -0.88px;
}

/* Cafe24 */
.c120 {
    font-family: "Cafe24Dangdanghae";
    font-size: 88px;
    line-height: 120%;
    text-align: center;
}

.c60 {
    font-family: "Cafe24Dangdanghae";
    font-size: 48px;
    line-height: 120%;
    text-align: center;
}


/* text align */
.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.pg-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.pg-top-tit {
    text-align: center;
    color: #1F0909;
    font-family: "Yoon Dokrip";
    font-size: 48px;
    line-height: 120%; /* 72px */
    letter-spacing: -2.88px;
}

.pg-bottom-tit {
    text-align: center;
    color: #1F0909;
    text-align: center;
    font-family: "Yoon Dokrip";
    font-size: 80px;
    line-height: 100%; /* 96px */
    letter-spacing: -4.4px;
}


@media(min-width: 1700px) {
    .pg-top-tit {
        font-size: 60px;
        line-height: 120%; /* 72px */
        letter-spacing: -3.6px;
    }
    .pg-bottom-tit {
        font-size: 96px;
        line-height: 100%; /* 96px */
        letter-spacing: -5.76px;
    }
    .g140, .p140 {
        font-size: 140px;
        letter-spacing: -8.4px;
    }
    .g120, .p120 {
        font-size: 120px;
        letter-spacing: -7.2px;
    }
    .c120 {
        font-size: 120px;
    }
    .g100, .p100 {
        font-size: 100px;
        letter-spacing: -6px;
    }
    .g68, .p68 {
        font-size: 68px;
        letter-spacing: -4.08px;
    }
    .g60, .p60 {
        font-size: 60px;
        letter-spacing: -3.6px;
    }
    .c60 {
        font-size: 60px;
    }
    .g48, .p48 {
        font-size: 48px;
        letter-spacing: -2.88px;
    }
    .g40, .p40 {
        font-size: 40px;
        letter-spacing: -2.4px;
    }
    .g36, .p36 {
        font-size: 36px;
        letter-spacing: -2.16px;
    }
    .g32, .p32 {
        font-size: 32px;
        letter-spacing: -1.92px;
    }
    .g28, .p28 {
        font-size: 28px;
        letter-spacing: -1.68px;
    }
    .g24, .p24 {
        font-size: 24px;
        letter-spacing: -1.44px;
    }
    .g22, .p22 {
        font-size: 22px;
        letter-spacing: -1.32px;
    }
    .g20, .p20 {
        font-size: 20px;
        letter-spacing: 16px;
    }
    .g16, .p16 {
        font-size: 16px;
        letter-spacing: -0.96px;
    }
}

@media(max-width: 1250px) {
    .pg-top-tit {
        font-size: 56px;
        letter-spacing: -2.22px;
    }
    .pg-bottom-tit {
        font-size: 72px;
        letter-spacing: -4.2px;
    }
    .g140, .p140 {
        font-size: 80px;
        letter-spacing: -4.4px;
    }
    .g120, .p120 {
        font-size: 64px;
        letter-spacing: -4px;
    }
    .g68, .p68 {
        font-size: 40px;
        letter-spacing: -2.4px;
    }
    .g60, .p60 {
        font-size: 32px;
        letter-spacing: -2.88px;
    }
    .g48, .p48 {
        font-size: 28px;
        letter-spacing: -2.4px;
    }
    .g40, .p40 {
        font-size: 24px;
        letter-spacing: -1.22px;
    }
    .c120 {
        font-size: 56px;
    }
    .c60 {
        font-size: 32px;
    }
}

@media(max-width: 950px) {
    .pg-top-tit {
        font-size: 40px;
        letter-spacing: -2.4px;
    }
    .pg-bottom-tit {
        font-size: 64px;
        letter-spacing: -3.6px;
    }
    .g140, .p140 {
        font-size: 64px;
        letter-spacing: -3.6px;
    }
    .g60, .p60 {
        font-size: 28px;
        letter-spacing: -2.4px;
    }
    .g48, .p48 {
        font-size: 24px;
        letter-spacing: -1.22px;
    }
    .g40, .g36, .p40, .p36 {
        font-size: 20px;
        letter-spacing: -1.24px;
    }
    .g32, .p32 {
        font-size: 20px;
        letter-spacing: -1.24px;
    }
    .g16, .p16 {
        font-size: 14px;
        letter-spacing: -0.88px;
    }
    .g24, .g28, .p24, .p28 {
        font-size: 18px;
    }
}

@media(max-width: 700px) {
    .pg-top-tit {
        font-size: 28px;
        letter-spacing: -2.4px;
    }
    .pg-bottom-tit {
        font-size: 56px;
        letter-spacing: -2.22px;
    }
    .g140, .p140 {
        font-size: 56px;
        letter-spacing: -3.2px;
    }
    .g120, .p120 {
        font-size: 40px;
        letter-spacing: -2.22px;
    }
    .g60, .p60 {
        font-size: 20px;
        letter-spacing: -1.2px;
    }
    .g48, .p48 {
        font-size: 18px;
    }
    .g40, .g32 {
        font-size: 16px;
        letter-spacing: -1.24px;
    }
    .c120 {
        font-size: 48px;
    }
    .c60 {
        font-size: 28px;
    }
    .g22 {
        font-size: 16px;
        letter-spacing: -1.24px;
    }
    .g36 {
        font-size: 12px;
        line-height: 140%; /* 16.8px */
        letter-spacing: -0.72px;
    }
    .g24, .g28 {
        font-size: 10px;
    }
}

@media(max-width: 650px) {
    .pg-top-tit {
        font-size: 24px;
        letter-spacing: -1.22px;
    }
    .pg-bottom-tit {
        font-size: 48px;
        letter-spacing: -2.88px;
    }
}

@media(max-width: 480px) {
    .pg-top-tit {
        font-size: 20px;
        letter-spacing: -1.2px;
    }
    .pg-bottom-tit {
        font-size: 40px;
        letter-spacing: -2.22px;
    }
    .g140, .p140 {
        font-size: 44px;
        letter-spacing: -2.8px;
    }
    .g120, .p120 {
        font-size: 32px;
        letter-spacing: -1.92px;
    }
    .g48 {
        font-size: 14px;
    }
    .g40, .g32 {
        font-size: 14px;
    }
    .c120 {
        font-size: 40px;
    }
    .c60 {
        font-size: 20px;
    }
}

@media(max-width: 370px) {
    .pg-bottom-tit {
        font-size: 32px;
        letter-spacing: -1.92px;
    }
}