@font-face {
  font-family: 'Poppins';
  src: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins_bold';
  src: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

:root {
  --font-family: 'Poppins';
  --title-font-family: 'Poppins_bold';
}

body * {
  line-height: 1.5;
}

@media screen and (min-width: 1500px) {
  .container {
    max-width: 1690px;
    /* 1690px - 30px(padding) */
  }
}

.beilaide-swiper-pagination.swiper-pagination-bullets {
  bottom: 0 !important;
  line-height: 0;
}

.beilaide-swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
  border-radius: 0px;
  border: none;
  background: #333333;
  width: 35px;
  height: 7px;
  opacity: 1;
  margin: 0 10px 0 0;
  transition: all 0.3s ease;
}

.beilaide-swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet:last-child {
  margin-right: 0px;
}

.beilaide-swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
  background: var(--color-primary);
  width: 59px;
}

:root {
  --font-64: 64px;
  --font-46: 46px;
  --font-36: 36px;
  --font-30: 30px;
  --font-24: 24px;
  --font-20: 20px;
  --font-16: 16px;
  --font-14: 14px;

  --component-gap: 120px;
  /* 组件间距 */
}

@media (max-width: 1280px) {
  :root {
    --font-64: 56px;
    --font-46: 40px;
    --font-36: 32px;
    --font-30: 28px;
    --font-24: 22px;
    --font-20: 20px;
    --font-16: 15px;
    --font-14: 14px;

    --component-gap: 95px;
  }
}

@media (max-width: 992px) {
  :root {
    --font-64: 48px;
    --font-46: 34px;
    --font-36: 28px;
    --font-30: 24px;
    --font-24: 20px;
    --font-20: 18px;
    --font-16: 14px;
    --font-14: 13px;

    --component-gap: 70px;
  }

  .beilaide-swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
    width: 30px;
    height: 6px;
  }

  .beilaide-swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
    width: 45px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-64: 40px;
    --font-46: 24px;
    --font-36: 20px;
    --font-30: 20px;
    --font-24: 18px;
    --font-20: 16px;
    --font-16: 13px;
    --font-14: 12px;

    --component-gap: 45px;
  }
}

@media (max-width: 576px) {
  :root {
    --font-64: 32px;
    --font-46: 22px;
    --font-36: 18px;
    --font-30: 18px;
    --font-24: 16px;
    --font-20: 14px;
    --font-16: 12px;
    --font-14: 12px;

    --component-gap: 20px;
  }

  .beilaide-swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
    width: 25px;
    height: 5px;
  }

  .beilaide-swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
    width: 35px;
  }
}