/* root.css */

:root {
  /* =========================
     COLOR
  ========================= */
  --color-primary: #1C7C6C;
  --color-primary-light: #DDECE6;
  --color-primary-bright: #009F80;
  --color-primary-dark: #0D3F35;

  --color-black: #111;
  --color-black-2: #222;
  --color-gray-1: #333;
  --color-gray-2: #666;
  --color-gray-3: #8C8C8C;
  --color-gray-4: #DDD;
  --color-gray-5: #F6F8F7;
  --color-white: #fff;

  --color-red: #F00;
  --color-orange: #FDA424;

  --color-dim: rgba(0, 0, 0, 0.50);
  --color-white-60: rgba(255, 255, 255, 0.60);
  --color-white-30: rgba(255, 255, 255, 0.30);
  --color-white-20: rgba(255, 255, 255, 0.20);
  --color-black-60: rgba(0, 0, 0, 0.60);
  --color-black-50: rgba(0, 0, 0, 0.50);
  --color-black-30: rgba(0, 0, 0, 0.30);


  /* =========================
     FONT SIZE
  ========================= */
  --font-12: 12px;
  --font-14: 14px;
  --font-16: 16px;
  --font-18: 18px;
  --font-20: 20px;
  --font-22: 22px;
  --font-24: 24px;
  --font-30: 30px;
  --font-34: 34px;
  --font-40: 40px;
  --font-44: 44px;
  --font-50: 50px;
  --font-54: 54px;
  --font-60: 60px;


  /* =========================
     FONT WEIGHT
  ========================= */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;


  /* =========================
     LINE HEIGHT
  ========================= */
  --lh-120: 120%;
  --lh-130: 130%;
  --lh-140: 140%;
  --lh-150: 150%;


  /* =========================
     RADIUS
  ========================= */
  --radius-5: 5px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-30: 30px;
  --radius-50: 50px;
  --radius-full: 999px;


  /* =========================
     SPACING
  ========================= */
  --space-5: 5px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;
  --space-150: 150px;


  /* =========================
     LAYOUT
  ========================= */
  --inner-pc: 6rem;
  --inner-wide: 7rem;
  --inner-large: 12rem;
  --inner-tablet: 2rem;
  --inner-mobile: 20px;
  --inner-small: 15px;


  /* =========================
     EFFECT
  ========================= */
  --transition-fast: 0.3s;
  --transition-base: 0.5s;
  --transition-slow: 0.8s;
  --transition-long: 1s;

  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-light: 1px 1px 15px rgba(0, 0, 0, 0.05);
}










/* =========================
1640px ↓
========================= */
@media (max-width: 1640px) {
  :root {
    --inner-pc: 2rem;
    --inner-wide: 2rem;
    --inner-large: 4rem;
    --inner-tablet: 2rem;
  }
}


/* =========================
1500px ↓
========================= */
@media (max-width: 1500px) {
  :root {
    --font-60: 54px;
    --font-54: 48px;
    --font-50: 44px;
    --font-44: 40px;
    --font-40: 36px;
    --font-34: 30px;

    --space-150: 130px;
    --space-120: 100px;
    --space-100: 90px;
  }
}


/* =========================
1370px ↓
========================= */
@media (max-width: 1370px) {
  :root {
    --font-60: 50px;
    --font-54: 46px;
    --font-50: 42px;
    --font-44: 38px;
    --font-40: 34px;
    --font-34: 28px;
    --font-30: 28px;

    --space-150: 120px;
    --space-120: 90px;
    --space-100: 80px;
    --space-80: 70px;
  }
}


/* =========================
1280px ↓
========================= */
@media (max-width: 1280px) {
  :root {
    --font-60: 48px;
    --font-54: 44px;
    --font-50: 40px;
    --font-44: 36px;
    --font-40: 34px;
    --font-34: 28px;
    --font-30: 26px;
    --font-24: 22px;
    --font-22: 20px;

	--font-16: 14px;
	--font-18: 16px;
	--font-20: 18px;

    --space-150: 120px;
    --space-120: 80px;
    --space-100: 70px;
    --space-80: 60px;
    --space-60: 50px;
  }
}


/* =========================
1024px ↓
========================= */
@media (max-width: 1024px) {
  :root {
    --inner-pc: 2rem;
    --inner-wide: 2rem;
    --inner-large: 2rem;

    --font-60: 44px;
    --font-54: 40px;
    --font-50: 38px;
    --font-44: 34px;
    --font-40: 32px;
    --font-34: 28px;
    --font-30: 26px;
    --font-24: 22px;
    --font-22: 20px;
    --font-20: 18px;

    --space-150: 100px;
    --space-120: 70px;
    --space-100: 60px;
    --space-80: 50px;
    --space-60: 40px;
    --space-50: 40px;
  }
}


/* =========================
860px ↓
========================= */
@media (max-width: 860px) {
  :root {
    --inner-pc: 20px;
    --inner-wide: 20px;
    --inner-large: 20px;
    --inner-mobile: 20px;

    --font-60: 42px;
    --font-54: 38px;
    --font-50: 34px;
    --font-44: 32px;
    --font-40: 32px;
    --font-34: 30px;
    --font-30: 26px;
    --font-24: 22px;
    --font-22: 19px;
    --font-20: 17px;
    --font-18: 17px;

    --space-150: 90px;
    --space-120: 70px;
    --space-100: 60px;
    --space-80: 50px;
    --space-60: 40px;
    --space-50: 34px;
    --space-40: 30px;
    --space-30: 20px;
  }
}


/* =========================
600px ↓
========================= */
@media (max-width: 600px) {
  :root {
    --inner-pc: 15px;
    --inner-wide: 15px;
    --inner-large: 15px;
    --inner-mobile: 15px;
    --inner-small: 15px;

    --font-60: 32px;
    --font-54: 28px;
    --font-50: 24px;
    --font-44: 24px;
    --font-40: 24px;
    --font-34: 22px;
    --font-30: 20px;
    --font-24: 16px;
    --font-22: 16px;
    --font-20: 16px;
    --font-18: 16px;
    --font-16: 14px;

    --space-150: 70px;
    --space-120: 60px;
    --space-100: 50px;
    --space-80: 40px;
    --space-60: 34px;
    --space-50: 25px;
    --space-40: 20px;
    --space-30: 15px;
    --space-24: 12px;
  }
}


/* =========================
360px ↓
========================= */
@media (max-width: 360px) {
  :root {
    --font-60: 32px;
    --font-54: 28px;
    --font-50: 27px;
    --font-44: 27px;
    --font-40: 27px;
    --font-34: 26px;
    --font-30: 24px;
    --font-24: 20px;
    --font-20: 15px;
    --font-18: 15px;

    --space-60: 30px;
    --space-50: 26px;
    --space-40: 20px;
    --space-30: 18px;
  }
}