@font-face {
  font-family: 'Source Han Sans CN';
  src: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/SourceHanSansCN/SourceHanSansCN-Bold.otf')
    format('opentype');
  font-weight: 700; /* Bold */
}

@font-face {
  font-family: 'Source Han Sans CN';
  src: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/SourceHanSansCN/SourceHanSansCN-Medium.otf')
    format('opentype');
  font-weight: 500; /* Medium */
}

@font-face {
  font-family: 'Source Han Sans CN';
  src: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/SourceHanSansCN/SourceHanSansCN-Normal.otf')
    format('opentype');
  font-weight: 400; /* Normal */
}

@font-face {
  font-family: 'Source Han Sans CN';
  src: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/SourceHanSansCN/SourceHanSansCN-Regular.otf')
    format('opentype');
  font-weight: 400; /*  sans-serif */
}

:root {
  --font-family: 'Source Han Sans CN' !important;
  --title-font-family: 'Source Han Sans CN';
  --title-font-size: 48px;
  --subtitle-font-size: 28px;
  --title-font-weight: 700;
  --subtitle-font-weight: 500;
  --font-weight-700: 700;
  --font-weight-500: 500;
  --font-size-xxl: 88px;
  --font-size-lg: 38px;
  --font-size-ml: 30px;
  --font-size-md: 28px;
  --font-size-sm: 20px;

  --container-padding: 240px;
}

@media screen and (max-width: 1440px) {
  :root {
    --font-size-lg: 32px;
    --font-size-ml: 28px;
    --font-size-md: 26px;

    --container-padding: 140px;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --title-font-size: 42px;
    --subtitle-font-size: 22px;
    --font-size-lg: 24px;
    --font-size-ml: 22px;
    --font-size-md: 20px;
    --font-size-sm: 18px;
    --container-padding: 80px;
  }
}

@media screen and (max-width: 992px) {
  :root {
    --title-font-size: 36px;
    --subtitle-font-size: 20px;
    --font-size-lg: 20px;
    --font-size-ml: 18px;
    --font-size-md: 16px;
    --font-size-sm: 14px;
    --container-padding: 60px;
  }
}

@media screen and (max-width: 552px) {
  :root {
    --title-font-size: 26px;
    --subtitle-font-size: 18px;
    --font-size-lg: 18px;
    --font-size-ml: 16px;
    --font-size-md: 14px;
    --font-size-sm: 12px;
    --container-padding: 30px;
  }
}