:root {
  --content-padding: 24px;
  --content-width: 1600px;
  --safe-area-inset: 2rem;

  /* --gradient-from: #37a5d0;
  --gradient-to: #6b5ba0; */

  --gradient-from: rgba(2, 205, 205, 1);
  --gradient-to: rgba(33, 164, 241, 1);

  --swiper-theme-color: #0d3587;

  --main-color: #0d3587;
  --link-color: #0d3587;

  --color-primary: #0d3587;
  --color-primary-hover: #0c50d6;
  --color-primary-active: #0c50d6;

  --color-primary-bg: #e6f4ff;
  --color-primary-bg-hover: #bae0ff;

  --color-primary-border: #91caff;
  --color-primary-border-hover: #69b1ff;

  --color-primary-text: #0d3587;
  --color-primary-text-hover: #4096ff;
  --color-primary-text-active: #0958d9;

  --color-text: rgba(0, 0, 0, 0.88);
  --color-text-secondary: rgba(0, 0, 0, 0.65);
  --color-text-tertiary: rgba(0, 0, 0, 0.45);
  --color-text-quaternary: rgba(0, 0, 0, 0.25);
  --color-fill: rgba(0, 0, 0, 0.15);
  --color-fill-secondary: rgba(0, 0, 0, 0.06);
  --color-fill-tertiary: rgba(0, 0, 0, 0.04);
  --color-fill-quaternary: rgba(0, 0, 0, 0.02);
  --color-bg-solid: rgb(0, 0, 0);
  --color-bg-solid-hover: rgba(0, 0, 0, 0.75);
  --color-bg-solid-active: rgba(0, 0, 0, 0.95);
  --color-bg-layout: #f5f5f5;
  --color-bg-container: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-spotlight: rgba(0, 0, 0, 0.85);
  --color-bg-blur: transparent;
  --color-border: #d9d9d9;
  --color-border-disabled: #d9d9d9;
  --color-border-secondary: #f0f0f0;

  --color-text-light-solid: #ffffff;
  --color-text-disabled: rgba(0, 0, 0, 0.25);

  --color-bg-container: #ffffff;
  --color-bg-container-disabled: rgba(0, 0, 0, 0.04);

  --border-radius: 0.08rem;
  --border-radius-xs: 2px;
  --border-radius-sm: 0.08rem;
  --border-radius-lg: 0.16rem;
}

@media screen and (max-width: 1200px) {
  :root {
    --safe-area-inset: 5vw;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --safe-area-inset: 24px;
  }
}

.fancybox__container {
  --fancybox-bg: rgba(24, 24, 27, 0.88);
}

:root {
  --blue-1: #e6f4ff;
  --blue-2: #bae0ff;
  --blue-3: #91caff;
  --blue-4: #69b1ff;
  --blue-5: #4096ff;
  --blue-6: #1677ff;
  --blue-7: #0958d9;
  --blue-8: #003eb3;
  --blue-9: #002c8c;
  --blue-10: #001d66;
  --purple-1: #f9f0ff;
  --purple-2: #efdbff;
  --purple-3: #d3adf7;
  --purple-4: #b37feb;
  --purple-5: #9254de;
  --purple-6: #722ed1;
  --purple-7: #531dab;
  --purple-8: #391085;
  --purple-9: #22075e;
  --purple-10: #120338;
  --cyan-1: #e6fffb;
  --cyan-2: #b5f5ec;
  --cyan-3: #87e8de;
  --cyan-4: #5cdbd3;
  --cyan-5: #36cfc9;
  --cyan-6: #13c2c2;
  --cyan-7: #08979c;
  --cyan-8: #006d75;
  --cyan-9: #00474f;
  --cyan-10: #002329;
  --green-1: #f6ffed;
  --green-2: #d9f7be;
  --green-3: #b7eb8f;
  --green-4: #95de64;
  --green-5: #73d13d;
  --green-6: #52c41a;
  --green-7: #389e0d;
  --green-8: #237804;
  --green-9: #135200;
  --green-10: #092b00;
  --magenta-1: #fff0f6;
  --magenta-2: #ffd6e7;
  --magenta-3: #ffadd2;
  --magenta-4: #ff85c0;
  --magenta-5: #f759ab;
  --magenta-6: #eb2f96;
  --magenta-7: #c41d7f;
  --magenta-8: #9e1068;
  --magenta-9: #780650;
  --magenta-10: #520339;
  --pink-1: #fff0f6;
  --pink-2: #ffd6e7;
  --pink-3: #ffadd2;
  --pink-4: #ff85c0;
  --pink-5: #f759ab;
  --pink-6: #eb2f96;
  --pink-7: #c41d7f;
  --pink-8: #9e1068;
  --pink-9: #780650;
  --pink-10: #520339;
  --red-1: #fff1f0;
  --red-2: #ffccc7;
  --red-3: #ffa39e;
  --red-4: #ff7875;
  --red-5: #ff4d4f;
  --red-6: #f5222d;
  --red-7: #cf1322;
  --red-8: #a8071a;
  --red-9: #820014;
  --red-10: #5c0011;
  --orange-1: #fff7e6;
  --orange-2: #ffe7ba;
  --orange-3: #ffd591;
  --orange-4: #ffc069;
  --orange-5: #ffa940;
  --orange-6: #fa8c16;
  --orange-7: #d46b08;
  --orange-8: #ad4e00;
  --orange-9: #873800;
  --orange-10: #612500;
  --yellow-1: #feffe6;
  --yellow-2: #ffffb8;
  --yellow-3: #fffb8f;
  --yellow-4: #fff566;
  --yellow-5: #ffec3d;
  --yellow-6: #fadb14;
  --yellow-7: #d4b106;
  --yellow-8: #ad8b00;
  --yellow-9: #876800;
  --yellow-10: #614700;
  --volcano-1: #fff2e8;
  --volcano-2: #ffd8bf;
  --volcano-3: #ffbb96;
  --volcano-4: #ff9c6e;
  --volcano-5: #ff7a45;
  --volcano-6: #fa541c;
  --volcano-7: #d4380d;
  --volcano-8: #ad2102;
  --volcano-9: #871400;
  --volcano-10: #610b00;
  --geekblue-1: #f0f5ff;
  --geekblue-2: #d6e4ff;
  --geekblue-3: #adc6ff;
  --geekblue-4: #85a5ff;
  --geekblue-5: #597ef7;
  --geekblue-6: #2f54eb;
  --geekblue-7: #1d39c4;
  --geekblue-8: #10239e;
  --geekblue-9: #061178;
  --geekblue-10: #030852;
  --gold-1: #fffbe6;
  --gold-2: #fff1b8;
  --gold-3: #ffe58f;
  --gold-4: #ffd666;
  --gold-5: #ffc53d;
  --gold-6: #faad14;
  --gold-7: #d48806;
  --gold-8: #ad6800;
  --gold-9: #874d00;
  --gold-10: #613400;
  --lime-1: #fcffe6;
  --lime-2: #f4ffb8;
  --lime-3: #eaff8f;
  --lime-4: #d3f261;
  --lime-5: #bae637;
  --lime-6: #a0d911;
  --lime-7: #7cb305;
  --lime-8: #5b8c00;
  --lime-9: #3f6600;
  --lime-10: #254000;
}

:root {
  --font72: 0.72rem;
  --font60: 0.6rem;
  --font56: 0.56rem;
  --font48: 0.48rem;
  --font44: 0.44rem;
  --font42: 0.42rem;
  --font40: 0.4rem;
  --font36: 0.36rem;
  --font32: 0.32rem;
  --font30: 0.3rem;
  --font28: 0.28rem;
  --font26: 0.26rem;
  --font24: 0.24rem;
  --font22: 0.22rem;
  --font20: 0.2rem;
  --font18: 0.18rem;
  --font16: 0.16rem;
  --font14: 0.14rem;

  --padding8: 0.08rem;
  --padding12: 0.12rem;
  --padding16: 0.16rem;
  --padding20: 0.2rem;
  --padding24: 0.24rem;
  --padding28: 0.28rem;
  --padding32: 0.32rem;
  --padding36: 0.36rem;
  --padding40: 0.4rem;
  --padding44: 0.44rem;
  --padding48: 0.48rem;
  --padding52: 0.52rem;
  --padding56: 0.56rem;
  --padding60: 0.6rem;
  --padding64: 0.64rem;
  --padding68: 0.68rem;
  --padding72: 0.72rem;
  --padding80: 0.8rem;
  --padding88: 0.88rem;
  --padding92: 0.92rem;
  --padding96: 0.96rem;
  --padding100: 1rem;
  --padding112: 1.12rem;

  --icon96: 0.96rem;
  --icon66: 0.66rem;
  --icon60: 0.6rem;
  --icon48: 0.48rem;
  --icon40: 0.4rem;
  --icon32: 0.32rem;
  --icon28: 0.28rem;
  --icon24: 0.24rem;
}

@media screen and (max-width: 767px) {
  :root {
    --font72: 24px;
    --font60: 24px;
    --font56: 24px;
    --font48: 20px;
    --font44: 20px;
    --font42: 20px;
    --font40: 20px;
    --font36: 18px;
    --font32: 18px;
    --font30: 18px;
    --font28: 16px;
    --font26: 16px;
    --font24: 14px;
    --font22: 14px;
    --font20: 14px;
    --font18: 14px;
    --font16: 14px;
    --font14: 12px;

    --padding8: 4px;
    --padding12: 4px;
    --padding16: 8px;
    --padding20: 8px;
    --padding24: 12px;
    --padding28: 12px;
    --padding32: 12px;
    --padding36: 12px;
    --padding40: 20px;
    --padding44: 20px;
    --padding48: 20px;
    --padding52: 20px;
    --padding56: 20px;
    --padding60: 24px;
    --padding64: 24px;
    --padding68: 24px;
    --padding72: 24px;
    --padding80: 24px;
    --padding88: 24px;
    --padding92: 24px;
    --padding96: 24px;
    --padding100: 24px;
    --padding112: 28px;

    --icon96: 48px;
    --icon66: 28px;
    --icon60: 24px;
    --icon48: 24px;
    --icon40: 24px;
    --icon32: 24px;
    --icon28: 24px;
    --icon24: 16px;
  }
}