:root {

    --spacing-xxxl: 96px;
    --spacing-xxl: 80px;
    --spacing-xl: 64px;
    --spacing-lg: 48px;
    --spacing-md: 32px;
    --spacing-sm: 24px;
    --spacing-xs: 16px;
    --spacing-xxs: 8px;
    --spacing-xxxs: 4px;
    --spacing-0: 0px;




    /* Color styles */
    --transparent: #00000000;
    --black: #000000;
    --white: #FFFFFF;
    --blue--50: #EDF6FF;
    --blue--100: #D4E9FF;
    --blue--200: #BBD9FF;
    --blue--300: #A2C9FF;
    --blue--400: #89B9FF;
    --blue--500: #70A9FF;
    --blue--600: #2D6EF3;
    --blue--700: #0743E4;
    --blue--800: #103CBD;
    --blue--900: #143794;
    --blue--950: #142969;
    --dark--color--50: #EAF6FF;
    --dark--color--100: #D9EEFF;
    --dark--color--200: #BBDFFF;
    --dark--color--300: #92C7FF;
    --dark--color--400: #67A3FF;
    --dark--color--500: #4380FF;
    --dark--color--600: #2358FF;
    --dark--color--700: #1848EA;
    --dark--color--800: #163DBD;
    --dark--color--900: #072476;
    --dark--color--950: #0C183F;
    --grey--50: #F7F8F8;
    --grey--100: #EDEDF1;
    --grey--200: #D7D9E0;
    --grey--300: #B4B8C5;
    --grey--400: #8C93A4;
    --grey--500: #6D748A;
    --grey--600: #585E71;
    --grey--700: #484C5C;
    --grey--800: #3E414E;
    --grey--900: #373A43;
    --grey--950: #1A1B20;
    --orange--50: #FFF6ED;
    --orange--100: #FFEAD4;
    --orange--200: #FFD0A8;
    --orange--300: #FFAF71;
    --orange--400: #FF8238;
    --orange--500: #FE6012;
    --orange--600: #EF4407;
    --orange--700: #C63008;
    --orange--800: #9D280F;
    --orange--900: #7E2310;
    --orange--950: #440E06;
    --radical--red--50: #FFEFF2;
    --radical--red--100: #FFE0E6;
    --radical--red--200: #FFC6D4;
    --radical--red--300: #FF97B1;
    --radical--red--400: #FF5D89;
    --radical--red--500: #FF2565;
    --radical--red--600: #FE1260;
    --radical--red--700: #D70047;
    --radical--red--800: #B30044;
    --radical--red--900: #990242;
    --radical--red--950: #56001F;
    --bright--green--50: #F0FFE4;
    --bright--green--100: #DDFFC4;
    --bright--green--200: #BDFF91;
    --bright--green--300: #90FF51;
    --bright--green--400: #60FE12;
    --bright--green--500: #46E500;
    --bright--green--600: #34B700;
    --bright--green--700: #278B00;
    --bright--green--800: #226D07;
    --bright--green--900: #1F5C0B;
    --bright--green--950: #0B3400;
    --caribbean--green--50: #EAFFF8;
    --caribbean--green--100: #CDFEED;
    --caribbean--green--200: #A0FAE0;
    --caribbean--green--300: #63F2D0;
    --caribbean--green--400: #25E2BC;
    --caribbean--green--500: #00E6BF;
    --caribbean--green--600: #00A489;
    --caribbean--green--700: #008371;
    --caribbean--green--800: #00675B;
    --caribbean--green--900: #00554C;
    --caribbean--green--950: #00302C;
    --amber--50: #FFFBEB;
    --amber--100: #FFF4C6;
    --amber--200: #FFE688;
    --amber--300: #FFD44A;
    --amber--400: #FFBE1A;
    --amber--500: #F99E07;
    --amber--600: #DD7602;
    --amber--700: #B75206;
    --amber--800: #943E0C;
    --amber--900: #7A330D;
    --amber--950: #461A02;
    --purple--heart--50: #F3F1FF;
    --purple--heart--100: #EBE5FF;
    --purple--heart--200: #D9CEFF;
    --purple--heart--300: #BEA6FF;
    --purple--heart--400: #9F75FF;
    --purple--heart--500: #843DFF;
    --purple--heart--600: #7916FF;
    --purple--heart--700: #6B04FD;
    --purple--heart--800: #5A03D5;
    --purple--heart--900: #4B05AD;
    --purple--heart--950: #2C0076;
    --red--orange--50: #FFF1F1;
    --red--orange--100: #FFDFDF;
    --red--orange--200: #FFC5C5;
    --red--orange--300: #FF9D9D;
    --red--orange--400: #FF6464;
    --red--orange--500: #FF2E2E;
    --red--orange--600: #ED1515;
    --red--orange--700: #C80D0D;
    --red--orange--800: #A50F0F;
    --red--orange--900: #881414;
    --red--orange--950: #4B0404;
    --gray--50: #F9FAFB;
    --gray--100: #F3F4F6;
    --gray--200: #E5E7EB;
    --gray--300: #D1D5DB;
    --gray--400: #9CA3AF;
    --gray--500: #6B7280;
    --gray--600: #4B5563;
    --gray--700: #374151;
    --gray--800: #1F2937;
    --gray--900: #111827;
    --red--50: #FEF2F2;
    --red--100: #FEE2E2;
    --red--200: #FECACA;
    --red--300: #FCA5A5;
    --red--400: #F87171;
    --red--500: #EF4444;
    --red--600: #DC2626;
    --red--700: #B91C1C;
    --red--800: #991B1B;
    --red--900: #7F1D1D;
    --yellow--50: #FFFBEB;
    --yellow--100: #FEF3C7;
    --yellow--200: #FDE68A;
    --yellow--300: #FCD34D;
    --yellow--400: #FBBF24;
    --yellow--500: #F59E0B;
    --yellow--600: #D97706;
    --yellow--700: #B45309;
    --yellow--800: #92400E;
    --yellow--900: #78350F;
    --green--50: #ECFDF5;
    --green--100: #D1FAE5;
    --green--200: #A7F3D0;
    --green--300: #6EE7B7;
    --green--400: #34D399;
    --green--500: #10B981;
    --green--600: #059669;
    --green--700: #047857;
    --green--800: #065F46;
    --green--900: #064E3B;
    --blue--50: #EFF6FF;
    --blue--100: #DBEAFE;
    --blue--200: #BFDBFE;
    --blue--300: #93C5FD;
    --blue--400: #60A5FA;
    --blue--500: #3B82F6;
    --blue--600: #2563EB;
    --blue--700: #1D4ED8;
    --blue--800: #1E40AF;
    --blue--900: #1E3A8A;
    --indigo--50: #EEF2FF;
    --indigo--100: #E0E7FF;
    --indigo--200: #C7D2FE;
    --indigo--300: #A5B4FC;
    --indigo--400: #818CF8;
    --indigo--500: #6366F1;
    --indigo--600: #4F46E5;
    --indigo--700: #4338CA;
    --indigo--800: #3730A3;
    --indigo--900: #312E81;
    --purple--50: #F5F3FF;
    --purple--100: #EDE9FE;
    --purple--200: #DDD6FE;
    --purple--300: #C4B5FD;
    --purple--400: #A78BFA;
    --purple--500: #8B5CF6;
    --purple--600: #7C3AED;
    --purple--700: #6D28D9;
    --purple--800: #5B21B6;
    --purple--900: #4C1D95;
    --pink--50: #FDF2F8;
    --pink--100: #FCE7F3;
    --pink--200: #FBCFE8;
    --pink--300: #F9A8D4;
    --pink--400: #F472B6;
    --pink--500: #EC4899;
    --pink--600: #DB2777;
    --pink--700: #BE185D;
    --pink--800: #9D174D;
    --pink--900: #831843;
}

.display{
    font-size: 6.75rem;
    font-weight: 700;
    line-height: 100%; /* 6.75rem */
    letter-spacing: -0.243rem;
}
.title-xxxl{
    font-size: 3rem;
    font-weight: 700;
    line-height: 140%; /* 4.2rem */
    letter-spacing: -0.12rem;
}
.title-xxl-700{
    font-size: 2rem;
    font-weight: 700;
    line-height: 140%; /* 4.2rem */
    letter-spacing: -0.12rem;
}
.title-xxl-500{
    font-size: 2rem;
    font-weight: 600;
    line-height: 140%; /* 2.8rem */
    letter-spacing: -0.072rem;
}
.title-xxl{
    font-size: 2rem;
    font-weight: 400;
    line-height: 100%; /* 2rem */
    letter-spacing: -0.072rem;
}
.title-xl-500{
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 100%; /* 1.5rem */
    letter-spacing: -0.03rem;
}
.title-xl{
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 100%; /* 1.5rem */
    letter-spacing: -0.03rem;
}
.body-lg-500{
    font-size: 16px;
    font-weight: 500;
    line-height: 140%; /* 1.75rem */
    letter-spacing: -0.045rem;
}
.body-lg{
    font-size: 16px;
    font-weight: 400;
    line-height: 140%; /* 1.75rem */
    letter-spacing: -0.05rem;
}
.body-md-500{
    font-size: 1rem;
    font-weight: 700;
    line-height: 140%; /* 1.4rem */
    letter-spacing: -0.036rem;
}
.body-md{
    font-size: 1rem;
    font-weight: 400;
    line-height: 140%; /* 1.4rem */
    letter-spacing: -0.036rem;
}
.sbttl-lg-700{
    font-size: 16px;
    font-weight: 700;
    line-height: 100%; /* 1.25rem */
    letter-spacing: -0.045rem;
}
.sbttl-lg-500{
    font-size: 20px;
    font-weight: 600;
    line-height: 100%; /* 1.25rem */
    letter-spacing: -0.045rem;}
.sbttl-lg{
    font-size: 16px;
    font-weight: 400;
    line-height: 100%; /* 1.25rem */
    letter-spacing: -0.045rem;
}
.sub-md-500{
    font-size: 1rem;
    font-weight: 500;
    line-height: 100%; /* 1rem */
    letter-spacing: -0.036rem;
}
.sub-sm{
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 100%; /* 0.875rem */
    letter-spacing: -0.0315rem;
}
.nav-font{
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 100%; /* 1.125rem */
    letter-spacing: -0.0405rem;}
.class-font{
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 100%; /* 2.25rem */
    letter-spacing: -0.081rem;
}
.number-lg{
    font-family: Pretendard Variable;
    font-size: 4rem;
    font-weight: 700;
    line-height: 100%; /* 4rem */
    letter-spacing: -0.144rem;
}
.number-md{
    font-family: Pretendard Variable;
    font-size: 3rem;
    font-weight: 700;
    line-height: 140%; /* 4.2rem */
    letter-spacing: -0.108rem;
}
.number-sm{
    font-family: Pretendard Variable;
    font-size: 2rem;
    font-weight: 500;
    line-height: 100%; /* 2rem */
    letter-spacing: -0.072rem;
}

/* Text Styles  */
.display {
    font-family: 'NanumSquare';
    font-size: 108px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .nav-font {
    font-family: 'NanumSquare';
    font-size: 18px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .class-font {
    font-family: 'NanumSquare';
    font-size: 36px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .title-xxxl {
    font-family: 'NanumSquare';
    font-size: 48px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -4%;
  }
  
  .title-xxl-bold {
    font-family: 'NanumSquare';
    font-size: 32px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .title-xxl-bold-100 {
    font-family: 'NanumSquare';
    font-size: 32px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .title-xxl-medium {
    font-family: 'NanumSquare';
    font-size: 32px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .title-xxl {
    font-family: 'NanumSquare';
    font-size: 32px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .title-xl-medium {
    font-family: 'NanumSquare';
    font-size: 24px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -2%;
  }
  
  .title-xl {
    font-family: 'NanumSquare';
    font-size: 24px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -2%;
  }
  
  .body-lg {
    font-family: 'NanumSquare';
    font-size: 20px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -4%;
  }
  
  .body-lg-medium {
    font-family: 'NanumSquare';
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .body-md {
    font-family: 'NanumSquare';
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .sbttl-lg-bold {
    font-family: 'NanumSquare';
    font-size: 20px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .sbttl-lg-medium {
    font-family: 'NanumSquare';
    font-size: 20px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .sbttl-lg {
    font-family: 'NanumSquare';
    font-size: 20px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .sub-md-medium {
    font-family: 'NanumSquare';
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .sub-sm {
    font-family: 'NanumSquare';
    font-size: 14px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .number-lg {
    font-family: Pretendard Variable;
    font-size: 64px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .number-md {
    font-family: Pretendard Variable;
    font-size: 48px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -3.5999999046325684%;
  }
  
  .number-sm {
    font-family: Pretendard Variable;
    font-size: 32px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -3.5999999046325684%;
  }

@media screen and (max-width:1440px) {
    
    .display{font-size: 4rem;}
    .title-xxxl{font-size: 2.75rem;}
    .title-xxl-700{font-size: 1.75rem;}
    .title-xxl-500{font-size: 1.75rem;}
    .title-xxl{font-size: 1.75rem;}
    .title-xl-500{font-size: 16px;}
    .title-xl{font-size: 16px;}
    .body-lg-500{font-size: 1.125rem;}
    .body-lg{font-size: 1.125rem;}
    .body-md-500{font-size: 1rem;}
    .body-md{font-size: 1rem;}
    .sbttl-lg-700{font-size: 1rem; }
    .sbttl-lg-500{font-size: 1rem;}
    .sbttl-lg{font-size: 1rem;}
    .sub-md-500{font-size: 1rem;}
    .sub-sm{font-size: 0.8rem;}
    .nav-font{font-size: 1rem;}
    .class-font{font-size: 2rem;}
    .number-lg{font-size: 3.25rem;}
    .number-md{font-size: 2rem;}
    .number-sm{font-size: 1.5rem;}

}

@media screen and (max-width:1100px) {
    :root {
        --spacing-xxl: 80px;
        --spacing-xl: 56px;
        --spacing-lg: 40px;
        --spacing-md: 24px;
        --spacing-sm: 16px;
        --spacing-xs: 8px;
        --spacing-xx: 4px;
    }
}

@media screen and (max-width:639px) {
    :root {
        --spacing-xxl: 64px;
        --spacing-xl: 48px;
        --spacing-lg: 32px;
        --spacing-md: 24px;
        --spacing-sm: 16px;
        --spacing-xs: 8px;
        --spacing-xx: 4px;
    }
}