@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

:root{
    --primary-color: #36B7C5;
    --infl-primary-color: #3CCBDB;
    --infl-accent-color: #F7E948;
    --red-color: #FE6F61;
    --red-100-color: #FF6262;
    --red-200-color: #FF8B8B;
    --pink-100-color: #DA2872;
    --accent-color: #F7E948;
/*    --accent-color:#FFCB57;*/
    --yellow-color:#F7E847;
    --blue-color:#3969EF;
    --standard-radius: 15px;
    --border-round-S: 5px;
    --border-round-M: 8px;
    --border-round-L: 10px;
    --border-color: #E4E6EA;
    --theme-color: #3CCBDB;
    --theme-bg-color: #F8F8FA;
    --theme-font-color: #444C67;
    --disabled-font-color: #C4C4C4;
    --disabled-gray-color:#D2D2DF;
    --disabled-status-color:#D2D2DF;
    --navy-color:#454D56;
    --gray-font-color:#454D56;
    --box-shadow: 10px 10px 10px rgba(212, 212, 223, 0.2);
    --box-shadow_black: 3px 3px 4px rgba(0, 0, 0, 0.25);
    --bg-gray: #F7F8F9;
    --bg-gray-color: #F8F8FA;
    --bg-sky: #ECF9FB;
    --bg-yellow: #FFF8E7;
    --bg-red: #FFF6F5;
    --bg-red-100: #FFE8E8;
    --gradient-color: linear-gradient(98deg, #3CCBDB 32.37%, #F7E847 114.35%);
    --gradient-hover-color: linear-gradient(98deg, #2E97A3 32.37%, #F7E847 114.35%);
    --placeholder-color: #B7BECD;
    --line-color: #E4E6EA;
    --gradient-primary: linear-gradient(115deg, #3CCBDB 0%, #DA2872 100%);
    --gradient-primary-hover: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(115deg, #3CCBDB 0%, #DA2872 100%);

    /* CTA 버튼 그라데이션 */
    --cta-gradient: linear-gradient(115deg, #3CCBDB 0%, #DA2872 100%);
    --cta-gradient-hover: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(115deg, #3CCBDB 0%, #DA2872 100%);
    --gradient-banner-color : radial-gradient(ellipse 87.78% 126.52% at 18.75% -26.52%, rgba(60, 203, 219, 0.25) 0%, rgba(60, 203, 219, 0) 66.3%), radial-gradient(ellipse 51.78% 106.84% at 102.5% 111.6%, rgba(255, 107, 168, 0.25) 0%, rgba(255, 107, 168, 0) 100%), radial-gradient(ellipse 55.31% 83.79% at -1.56% 100%, rgba(255, 178, 154, 0.15) 0%, rgba(255, 178, 154, 0) 100%);

    /* 버튼 그라데이션 - blue */
    --cta-gradient-blue: linear-gradient(115deg, #3C91DB 0%, #DA2872 100%);
    --cta-gradient-blue-hover: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(115deg, #3C91DB 0%, #DA2872 100%);


  /* @디자인 시스템 */

  /* Headline */
  --headline-l-size: 56px;
  --headline-l-line: 64px;
  --headline-l-letter: -1.5px;

  --headline-m-size: 48px;
  --headline-m-line: 56px;
  --headline-m-letter: -1.5px;

  --headline-s-size: 40px;
  --headline-s-line: 48px;
  --headline-s-letter: -1.5px;

  /* Title */
  --title-l-size: 36px;
  --title-l-line: 44px;
  --title-l-letter: -1px;

  --title-m-size: 30px;
  --title-m-line: 40px;
  --title-m-letter: -1px;

  --title-s-size: 24px;
  --title-s-line: 32px;
  --title-s-letter: -0.5px;

  --title-xs-size: 20px;
  --title-xs-line: 28px;
  --title-xs-letter: -0.5px;

  /* Body */
  --body-l-size: 18px;
  --body-l-line: 24px;
  --body-l-letter: -0.5px;
  /* ============================================
     @디자인 시스템 — Color Primitive Tokens
     ============================================ */

  /* Cyan */
  --color-cyan-50: #EEF9FA;
  --color-cyan-100: #D4F1F4;
  --color-cyan-200: #A9E3E9;
  --color-cyan-300: #72CFDA;
  --color-cyan-400: #3FBFCC;
  --color-cyan-500: #36B7C5;
  --color-cyan-600: #258FA0;
  --color-cyan-700: #1F7A87;
  --color-cyan-800: #165A64;
  --color-cyan-850: #0F4A55;
  --color-cyan-900: #0D3A40;

  /* Neutral */
  --color-neutral-0: #FFFFFF;
  --color-neutral-25: #FBFBFC;
  --color-neutral-50: #F7F8F9;
  --color-neutral-100: #F0F1F3;
  --color-neutral-200: #E4E6EA;
  --color-neutral-300: #C9CDD4;
  --color-neutral-400: #A0A7B4;
  --color-neutral-500: #72798A;
  --color-neutral-600: #4E5668;
  --color-neutral-700: #333C4D;
  --color-neutral-800: #1E2534;
  --color-neutral-900: #111827;
  --color-neutral-1000: #000000;

  /* Red */
  --color-red-50: #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;

  /* Green */
  --color-green-50: #F0FDF4;
  --color-green-100: #DCFCE7;
  --color-green-500: #22C55E;
  --color-green-600: #16A34A;

  /* Pink */
  --color-pink-50: #FFF7FA;
  --color-pink-100: #FDE8F1;
  --color-pink-500: #DA2872;

  /* ============================================
     @디자인 시스템 — Color Semantic Tokens
     ============================================ */

  /* Content */
  --color-content-strong: var(--color-neutral-800);
  --color-content-default: var(--color-neutral-600);
  --color-content-subtle: var(--color-neutral-500);
  --color-content-muted: var(--color-neutral-400);
  --color-content-faint: var(--color-neutral-300);
  --color-content-disabled: var(--color-neutral-300);
  --color-content-inverse: var(--color-neutral-0);
  --color-content-brand: var(--color-cyan-600);

  /* Surface */
  --color-surface-default: var(--color-neutral-0);
  --color-surface-wash: var(--color-neutral-25);
  --color-surface-subtle: var(--color-neutral-50);
  --color-surface-muted: var(--color-neutral-100);
  --color-surface-strong: var(--color-neutral-200);
  --color-surface-inverse: var(--color-neutral-800);
  --color-surface-brand: var(--color-cyan-500);
  --color-surface-brand-subtle: var(--color-cyan-50);
  --color-surface-brand-muted: var(--color-cyan-100);

  /* Border */
  --color-border-default: var(--color-neutral-200);
  --color-border-subtle: var(--color-neutral-100);
  --color-border-strong: var(--color-neutral-300);
  --color-border-focus: var(--color-cyan-500);
  --color-border-brand: var(--color-cyan-500);
  --color-border-brand-subtle: var(--color-cyan-200);
  --color-border-error: var(--color-red-500);
  --color-border-error-subtle: var(--color-red-100);
  --color-border-disabled: var(--color-neutral-200);

  /* Status */
  --color-status-success-default: var(--color-green-500);
  --color-status-success-subtle: var(--color-green-50);
  --color-status-success-muted: var(--color-green-100);
  --color-status-success-content: var(--color-green-600);
  --color-status-error-default: var(--color-red-500);
  --color-status-error-subtle: var(--color-red-50);
  --color-status-error-muted: var(--color-red-100);
  --color-status-error-content: var(--color-red-600);

  /* Accent */
  --color-accent-default: var(--color-pink-500);
  --color-accent-weak: var(--color-pink-100);
  --color-accent-subtle: var(--color-pink-50);

  /* Overlay */
  --color-overlay-hover: rgba(0, 0, 0, 0.20);
  --color-overlay-pressed: rgba(0, 0, 0, 0.40);

  /* ============================================
     @디자인 시스템 — Gradient Tokens
     ============================================ */
  --gradient-cta-accent-magenta: linear-gradient(90deg, #36B7C5 0%, #DA2872 100%);
  --gradient-cta-accent-blue: radial-gradient(629.35% 260.72% at -21.43% 307.14%, #7857F0 0%, #36B7C5 100%);
  --gradient-bg-subtle: linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%);
  --gradient-bg-weak: radial-gradient(110.03% 67.1% at 5.87% 97.04%, rgba(54, 183, 197, 0.15) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(104.44% 42.41% at 100% 0%, rgba(54, 183, 197, 0.15) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF;
  --gradient-surface-inverse: linear-gradient(90deg, #454D56 0%, #325782 100%);

  /* ============================================
     @디자인 시스템 — Typography (Desktop)
     ============================================ */

  /* 레거시 전용 토큰 (DS에 동일 이름 없음) */
  --label-r-size: 12px;
  --label-r-line: 20px;
  --label-r-letter: -0.5px;
  --label-r-weight: 500;

  --label-m-size: 12px;
  --label-m-line: 20px;
  --label-m-letter: -0.5px;
  --label-m-weight: 500;

  --body-r-size: 14px;
  --body-r-line: 22px;
  --body-r-letter: -0.5px;
  --body-r-weight: 400;

  --headline-size: 36px;
  --headline-line: 44px;
  --headline-letter: -1px;
  --headline-weight: 700;

  /* 디자인 시스템 타이포그래피 토큰 */
  --headline-l-size: 56px;
  --headline-l-line: 64px;
  --headline-l-letter: -1.5px;

  --headline-m-size: 48px;
  --headline-m-line: 56px;
  --headline-m-letter: -1.5px;

  --headline-s-size: 40px;
  --headline-s-line: 48px;
  --headline-s-letter: -1.5px;

  --title-l-size: 36px;
  --title-l-line: 44px;
  --title-l-weight: 700;
  --title-l-letter: -1px;

  --title-m-size: 30px;
  --title-m-line: 40px;
  --title-m-weight: 600;
  --title-m-letter: -1px;

  --title-s-size: 24px;
  --title-s-line: 32px;
  --title-s-weight: 600;
  --title-s-letter: -0.5px;

  --title-xs-size: 20px;
  --title-xs-line: 28px;
  --title-xs-weight: 600;
  --title-xs-letter: -0.5px;

  --body-l-size: 18px;
  --body-l-line: 24px;
  --body-l-weight: 500;
  --body-l-letter: -0.5px;

  --body-m-size: 16px;
  --body-m-line: 24px;
  --body-m-weight: 500;
  --body-m-letter: -0.5px;

  --body-s-size: 14px;
  --body-s-line: 22px;
  --body-s-weight: 400;
  --body-s-letter: -0.5px;

  /* Caption */
  --caption-m-size: 12px;
  --caption-m-line: 20px;
  --caption-m-weight: 500;
  --caption-m-letter: -0.5px;

  --caption-s-size: 10px;
  --caption-s-line: 10px;
  --caption-s-weight: 500;
  --caption-s-letter: -0.5px;

  /* ============================================
     @디자인 시스템 — Spacing Tokens
     ============================================ */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-108: 108px;

  /* Radius */
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-24: 24px;
  --radius-full: 9999px;

  /* ============================================
     기존 변수 → 새 토큰 값으로 매핑 (하위호환)
     ============================================ */

  /* color - text */
  --color-text-inverse: var(--color-neutral-0);
  --color-text-strong: var(--color-neutral-800);
  --color-text-medium: var(--color-neutral-600);
  --color-text-soft: var(--color-neutral-500);
  --color-text-disabled: var(--color-neutral-300);
  --color-text-primary: var(--color-cyan-600);
  --color-text-error: var(--color-red-600);

  /* color - border (기존 변수) */
  --color-border-weak: var(--color-neutral-100);
  --color-border-medium: var(--color-neutral-300);
  --color-border-error: var(--color-red-100);
  /* --color-border-default 는 위 Semantic에서 선언됨 */

  /* color - primary */
  --color-primary-300: var(--color-cyan-100);
  --color-primary-500: var(--color-cyan-500);
  --color-primary-700: var(--color-cyan-700);
  --color-primary-900: var(--color-cyan-900);

  --color-primary: var(--color-primary-500);
  --color-primary-weak: var(--color-primary-300);
  --color-primary-dark: var(--color-primary-700);
  --color-primary-deep: var(--color-primary-900);

  /* color - point */
  --color-point-500: var(--color-pink-500);
  --color-point-300: var(--color-pink-50);

  --color-point: var(--color-point-500);
  --color-point-weak: var(--color-point-300);

  /* surface, background */
  --surface-gray-weak: var(--color-neutral-25);
  --surface-gray: var(--color-neutral-50);
  --surface-disabled: var(--color-neutral-100);
  --surface-dark: #454D56;
  --surface-error: var(--color-red-600);
  --surface-white: var(--color-neutral-0);
  --surface-translucent-30: rgba(255, 255, 255, 0.3);
  --surface-translucent-50: rgba(255, 255, 255, 0.5);
  --surface-dim-20: rgba(0, 0, 0, 0.2);

  --background-gray-weak: #FAFAFA;

  /* Font Family */
  --font-family-base: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI",
  Roboto, "Apple SD Gothic Neo", sans-serif;

  --font-family-base: "Pretendard", -apple-system, system-ui, "Segoe UI",
  Roboto, "Apple SD Gothic Neo", sans-serif;

  /* Font shorthand — Headline (Bold 700, Semibold 600) */
  --font-headline-l-bold:     normal 700 var(--headline-l-size) / var(--headline-l-line) var(--font-family-base);
  --font-headline-l-semibold: normal 600 var(--headline-l-size) / var(--headline-l-line) var(--font-family-base);
  --font-headline-m-bold:     normal 700 var(--headline-m-size) / var(--headline-m-line) var(--font-family-base);
  --font-headline-m-semibold: normal 600 var(--headline-m-size) / var(--headline-m-line) var(--font-family-base);
  --font-headline-s-bold:     normal 700 var(--headline-s-size) / var(--headline-s-line) var(--font-family-base);
  --font-headline-s-semibold: normal 600 var(--headline-s-size) / var(--headline-s-line) var(--font-family-base);

  /* Font shorthand — Title (L: Bold/Semibold, M/S/XS: Semibold only) */
  --font-title-l-bold:     normal 700 var(--title-l-size) / var(--title-l-line) var(--font-family-base);
  --font-title-l-semibold: normal 600 var(--title-l-size) / var(--title-l-line) var(--font-family-base);
  --font-title-m:          normal 600 var(--title-m-size) / var(--title-m-line) var(--font-family-base);
  --font-title-s:          normal 600 var(--title-s-size) / var(--title-s-line) var(--font-family-base);
  --font-title-xs:         normal 600 var(--title-xs-size) / var(--title-xs-line) var(--font-family-base);

  /* Font shorthand — Body (L: Medium, M: Semibold/Medium, S: Semibold/Medium/Regular) */
  --font-body-l:          normal 500 var(--body-l-size) / var(--body-l-line) var(--font-family-base);
  --font-body-m-semibold: normal 600 var(--body-m-size) / var(--body-m-line) var(--font-family-base);
  --font-body-m-medium:   normal 500 var(--body-m-size) / var(--body-m-line) var(--font-family-base);
  --font-body-s-semibold: normal 600 var(--body-s-size) / var(--body-s-line) var(--font-family-base);
  --font-body-s-medium:   normal 500 var(--body-s-size) / var(--body-s-line) var(--font-family-base);
  --font-body-s-regular:  normal 400 var(--body-s-size) / var(--body-s-line) var(--font-family-base);

  /* Font shorthand — Caption (Medium only) */
  --font-caption-m: normal 500 var(--caption-m-size) / var(--caption-m-line) var(--font-family-base);
  --font-caption-s: normal 500 var(--caption-s-size) / var(--caption-s-line) var(--font-family-base);

}

/* Mobile Style */
@media (max-width: 1184px) {
    :root{
        /* Headline */
        --headline-l-size: 40px;
        --headline-l-line: 48px;

        --headline-m-size: 36px;
        --headline-m-line: 44px;

        --headline-s-size: 32px;
        --headline-s-line: 40px;

        /* Title */
        --title-l-size: 28px;
        --title-l-line: 36px;

        --title-m-size: 24px;
        --title-m-line: 32px;

        --title-s-size: 20px;
        --title-s-line: 28px;

        --title-xs-size: 18px;
        --title-xs-line: 24px;

        /* Body, Caption은 mobile/desktop 동일하므로 생략 */
    }
}

/* 타이포그래피 유틸리티 클래스 */

/* Headline */
.text-headline-l-bold{ font: var(--font-headline-l-bold); letter-spacing: var(--headline-l-letter); }
.text-headline-l-semibold{ font: var(--font-headline-l-semibold); letter-spacing: var(--headline-l-letter); }
.text-headline-m-bold{ font: var(--font-headline-m-bold); letter-spacing: var(--headline-m-letter); }
.text-headline-m-semibold{ font: var(--font-headline-m-semibold); letter-spacing: var(--headline-m-letter); }
.text-headline-s-bold{ font: var(--font-headline-s-bold); letter-spacing: var(--headline-s-letter); }
.text-headline-s-semibold{ font: var(--font-headline-s-semibold); letter-spacing: var(--headline-s-letter); }

/* Title */
.text-title-l-bold{ font: var(--font-title-l-bold); letter-spacing: var(--title-l-letter); }
.text-title-l-semibold{ font: var(--font-title-l-semibold); letter-spacing: var(--title-l-letter); }
.text-title-m{ font: var(--font-title-m); letter-spacing: var(--title-m-letter); }
.text-title-s{ font: var(--font-title-s); letter-spacing: var(--title-s-letter); }
.text-title-xs{ font: var(--font-title-xs); letter-spacing: var(--title-xs-letter); }

/* Body */
.text-body-l{ font: var(--font-body-l); letter-spacing: var(--body-l-letter); }
.text-body-m-semibold{ font: var(--font-body-m-semibold); letter-spacing: var(--body-m-letter); }
.text-body-m-medium{ font: var(--font-body-m-medium); letter-spacing: var(--body-m-letter); }
.text-body-s-semibold{ font: var(--font-body-s-semibold); letter-spacing: var(--body-s-letter); }
.text-body-s-medium{ font: var(--font-body-s-medium); letter-spacing: var(--body-s-letter); }
.text-body-s-regular{ font: var(--font-body-s-regular); letter-spacing: var(--body-s-letter); }

/* Caption */
.text-caption-m{ font: var(--font-caption-m); letter-spacing: var(--caption-m-letter); }
.text-caption-s{ font: var(--font-caption-s); letter-spacing: var(--caption-s-letter); }





* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Pretendard', -apple-system, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent; letter-spacing: -0.5px;
}

textarea {
    border: 1px solid var(--line-color);
    resize: both;
    border-radius: var(--border-round-S);
}
input, select, textarea{
    transition: all .3s;
}
    input:focus, select:focus, textarea:focus {
        border-color: var(--primary-color);
     }
    input::placeholder, textarea::placeholder {
        color: #888;
    }
    select,
    select.form-control {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.314' height='6.072' viewBox='0 0 9.314 6.072'%3E%3Cpath d='M1661.8,597l3.95,3.95-3.95,3.95' transform='translate(605.607 -1661.093) rotate(90)' fill='none' stroke='%23444' stroke-width='2'/%3E%3C/svg%3E");
        background-size: 10px 6px;
        background-position: right 8px center;
        background-repeat: no-repeat;
        padding-right: 26px;
   }
    select::-ms-expand {
        display: none;
    }


.loading span:not(.loader) {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--accent-color);
  border-radius: 50%;
  animation: loading 1s linear infinite;
}

.loading span:nth-child(1) {
  animation-delay: 0s;
}

.loading span:nth-child(2) {
  animation-delay: 0.2s;
  margin: 0px 10px
}

.loading span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loading {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.max1070{
    max-width: 1070px;
}


input[type="radio"]{
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    -webkit-appearance: none;
    border-radius: 0;
    border: 0;
    margin: 0px 0px 0px !important;
    padding: 0px 0px 0px;
    cursor: pointer;
    color: red;
    vertical-align: -3px;
}


input[type="radio"] {
    background: url(../img/icon/radio_off.svg) no-repeat 0 0;
    background-size: cover;
}

input[type="radio"]:checked {
    background: url(../img/icon/radio_on.svg) no-repeat 0 0;
    background-size: cover;
}


.infinite-scroll-loader{
    text-align: center;
    padding: 50px 0 ;
}

.bg-gray{
    background-color: var(--bg-gray);
    padding: 10px 20px;
    border-radius: 10px;
}
.bg-yellow{
    background-color: var(--bg-yellow);
    padding: 10px 20px;
    border-radius: 10px;
}
.bg-red{
    background-color: var(--bg-red);
    padding: 10px 20px;
    border-radius: 10px;
}

.review_type_icon{
    max-width: 24px;
    height: 24px;
    object-fit: cover;
}

@media (max-width:800px){
    .review_type_icon{
        max-width: 22px;
        width: 20px;
        height: 20px;
    }
}