:root {
  --layout-padding: 0px;
  --layout-maxWidth: 1440px;
  /* 内容间距 */
  --layout-itemMargin: 24px;
  /* 模块上下间距 */
  --module-margin-m: 80px;
  --module-margin-s: 40px;
  /* 一行几个 */
  --layout-rowNumber: 4;
  /* 合并单元格 */
  --layout-grid-column: 1/3;
  --layout-grid-row: 1/3;
  /* 设计稿宽度(一般为1920px) */
  --design-width: 1920;
  font-size: 1px;
}

body {
  overflow-x: hidden;
}

/* -------------- 栅格适配 start -------------- */
@media screen and (max-width: 414.9px) {
  .col-xs-12 {
    --layout-rowNumber: 12;
  }
  .col-xs-11 {
    --layout-rowNumber: 11;
  }
  .col-xs-10 {
    --layout-rowNumber: 10;
  }
  .col-xs-9 {
    --layout-rowNumber: 9;
  }
  .col-xs-8 {
    --layout-rowNumber: 8;
  }
  .col-xs-7 {
    --layout-rowNumber: 7;
  }
  .col-xs-6 {
    --layout-rowNumber: 6;
  }
  .col-xs-5 {
    --layout-rowNumber: 5;
  }
  .col-xs-4 {
    --layout-rowNumber: 4;
  }
  .col-xs-3 {
    --layout-rowNumber: 3;
  }
  .col-xs-2 {
    --layout-rowNumber: 2;
  }
  .col-xs-1 {
    --layout-rowNumber: 1;
  }
}

@media (min-width: 414.9px) and (max-width: 991.9px) {
  .col-sm-12 {
    --layout-rowNumber: 12;
  }
  .col-sm-11 {
    --layout-rowNumber: 11;
  }
  .col-sm-10 {
    --layout-rowNumber: 10;
  }
  .col-sm-9 {
    --layout-rowNumber: 9;
  }
  .col-sm-8 {
    --layout-rowNumber: 8;
  }
  .col-sm-7 {
    --layout-rowNumber: 7;
  }
  .col-sm-6 {
    --layout-rowNumber: 6;
  }
  .col-sm-5 {
    --layout-rowNumber: 5;
  }
  .col-sm-4 {
    --layout-rowNumber: 4;
  }
  .col-sm-3 {
    --layout-rowNumber: 3;
  }
  .col-sm-2 {
    --layout-rowNumber: 2;
  }
  .col-sm-1 {
    --layout-rowNumber: 1;
  }
}

@media (min-width: 992px) and (max-width: 1199.9px) {
  .col-md-12 {
    --layout-rowNumber: 12;
  }
  .col-md-11 {
    --layout-rowNumber: 11;
  }
  .col-md-10 {
    --layout-rowNumber: 10;
  }
  .col-md-9 {
    --layout-rowNumber: 9;
  }
  .col-md-8 {
    --layout-rowNumber: 8;
  }
  .col-md-7 {
    --layout-rowNumber: 7;
  }
  .col-md-6 {
    --layout-rowNumber: 6;
  }
  .col-md-5 {
    --layout-rowNumber: 5;
  }
  .col-md-4 {
    --layout-rowNumber: 4;
  }
  .col-md-3 {
    --layout-rowNumber: 3;
  }
  .col-md-2 {
    --layout-rowNumber: 2;
  }
  .col-md-1 {
    --layout-rowNumber: 1;
  }
}

@media (min-width: 1200px) and (max-width: 1439.9px) {
  .col-lg-12 {
    --layout-rowNumber: 12;
  }
  .col-lg-11 {
    --layout-rowNumber: 11;
  }
  .col-lg-10 {
    --layout-rowNumber: 10;
  }
  .col-lg-9 {
    --layout-rowNumber: 9;
  }
  .col-lg-8 {
    --layout-rowNumber: 8;
  }
  .col-lg-7 {
    --layout-rowNumber: 7;
  }
  .col-lg-6 {
    --layout-rowNumber: 6;
  }
  .col-lg-5 {
    --layout-rowNumber: 5;
  }
  .col-lg-4 {
    --layout-rowNumber: 4;
  }
  .col-lg-3 {
    --layout-rowNumber: 3;
  }
  .col-lg-2 {
    --layout-rowNumber: 2;
  }
  .col-lg-1 {
    --layout-rowNumber: 1;
  }
}

@media (min-width: 1440px) {
  .col-xl-12 {
    --layout-rowNumber: 12;
  }
  .col-xl-11 {
    --layout-rowNumber: 11;
  }
  .col-xl-10 {
    --layout-rowNumber: 10;
  }
  .col-xl-9 {
    --layout-rowNumber: 9;
  }
  .col-xl-8 {
    --layout-rowNumber: 8;
  }
  .col-xl-7 {
    --layout-rowNumber: 7;
  }
  .col-xl-6 {
    --layout-rowNumber: 6;
  }
  .col-xl-5 {
    --layout-rowNumber: 5;
  }
  .col-xl-4 {
    --layout-rowNumber: 4;
  }
  .col-xl-3 {
    --layout-rowNumber: 3;
  }
  .col-xl-2 {
    --layout-rowNumber: 2;
  }
  .col-xl-1 {
    --layout-rowNumber: 1;
  }
}
/* -------------- 栅格适配 end -------------- */

/* -------------- 内容两侧留白适配 start  -------------- */
@media screen and (max-width: 1920px) {
  :root {
    --layout-padding: 0px;
    --layout-maxWidth: 1200px;
  }
}
@media screen and (max-width: 1248px) {
  :root {
    --layout-padding: 24px;
    --layout-maxWidth: 100vw;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --layout-padding: 16px;
    --layout-maxWidth: 100vw;
    --design-width: 375;
    font-size: calc(100vw / var(--design-width));
  }
}
@media screen and (max-width: 375px) {
  :root {
    --layout-padding: 12px;
    --layout-maxWidth: 100vw;
  }
}
/* -------------- 内容两侧留白适配 end  -------------- */

/* -------------- 字体适配 start  -------------- */
@media screen and (min-width: 1920px) {
  :root {
    --font-h1: 52px;
    --font-h2: 48px;
    --font-h3: 40px;
    --font-h4: 32px;
    --font-h5: 28px;
    --font-subtitle: 24px;
    --font-body: 20px;
    --font-body-m: 16px;
    --font-body-s: 14px;
  }
}
@media screen and (max-width: 1920px) {
  :root {
    --font-h1: 48px;
    --font-h2: 40px;
    --font-h3: 32px;
    --font-h4: 28px;
    --font-h5: 24px;
    --font-subtitle: 20px;
    --font-body: 16px;
    --font-body-m: 14px;
    --font-body-s: 12px;
  }
}
@media screen and (max-width: 992px) {
  :root {
    --font-h1: 28px;
    --font-h2: 24px;
    --font-h3: 24px;
    --font-h4: 20px;
    --font-h5: 20px;
    --font-subtitle: 20px;
    --font-body: 16px;
    --font-body-m: 14px;
    --font-body-s: 12px;
  }
}
/* -------------- 字体适配 end  -------------- */

/* -------------- 模块上下间距适配 start  -------------- */
@media screen and (max-width: 768px) {
  :root {
    --module-margin-m: 24px;
    --module-margin-s: 24px;
  }
}
.flex--module--margin-xl {
  margin: var(--module-margin-m) 0;
}
.flex--module--margin-lg {
  margin: var(--module-margin-m) 0 var(--module-margin-s);
}
.flex--module--margin-md {
  margin: var(--module-margin-s) 0;
}
/* -------------- 模块上下间距适配 end  -------------- */

/* -------------- 首焦屏 start  -------------- */
.flex--part-screen {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100%;
}
/* -------------- 首焦屏 end  -------------- */

/* 内容外壳 */
.flex--grid--layout {
  padding: 0 var(--layout-padding);
  max-width: var(--layout-maxWidth);
  margin: 0 auto;
  box-sizing: border-box;
}

/* 栅格布局，等比分 */
.flex--grid--main {
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-column: span var(--layout-rowNumber);
  grid-gap: var(--layout-itemMargin);
  grid-template-columns: repeat(var(--layout-rowNumber), 1fr);
}

/* 合并栅格 */
.flex--grid-rowCol {
  grid-column: var(--layout-grid-column);
  grid-row: var(--layout-grid-row);
}

/* 等比宽高 */
.aspect-ratio {
  aspect-ratio: 1;
}