/* ======== css for web main page ======== */

/* SPACE SIZE (px)
8px 16px 24px 32px 40px 48px 56px 64px 72px 80px 88px 96px 104px 112px 120px 128px */

/* FONT SIZE (px)
 12px 14px 16px 24px 32px 40px 48px 56px 64px 72px 80px 88px 96px 104px 112px 120px 128px  */

/* FONT WEIGHT 
400 500 600 700 */

/* LINE HEIGHT 
1 1.2 1.5 2   */

/* COLORS 
main color   #6461f6
shade main color  #504ec5
second color #fcf800
Gary color: #141331  #5c5c5c
*/

/* ========================================== */
/* GENERAL STYLE */
/* ========================================== */

/* @font-face {
  font-family: "宋骨黑体";
  src: url("/fonts/SGH-Medium.ttf");
} */

/* @font-face {
  font-family: "霞鹜新晰黑";
  src: url("/fonts/LXGWNeoXiHei.ttf");
} */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;

  overflow-x: hidden;
}

body {
  font-family: "Noto Sans SC", sans-serif;
  font-size: 1.6rem;
  color: #141331;
  line-height: 1;
  font-weight: normal;

  overflow-x: hidden;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* ========================================== */
/* GENERAL CONTARINER */
/* ========================================== */

.container {
  max-width: 100rem;
  margin: 0 auto;
}

.container1600 {
  max-width: 160rem;
  margin: 0 auto;
}

.container1350 {
  max-width: 135rem;
  margin: 0 auto;
}

.container1000 {
  max-width: 100rem;
  margin: 0 auto;
}

/* ========================================== */
/* GENERAL LINK STYLE */
/* ========================================== */

.link:link,
.link:visited {
  text-decoration: none;
  color: #6461f6;

  transition: all 0.2s ease;
}

.link:hover,
.link:active {
  color: #504ec5;
}

/* ========================================== */
/* GRID LAYOUT */
/* ========================================== */

.grid {
  display: grid;
}

.grid-2-12 {
  grid-template-columns: 1fr 2fr;
}

.grid-2-31 {
  grid-template-columns: 3fr 1fr;
}

.grid-2-13 {
  grid-template-columns: 1fr 3fr;
}

.grid-3-11 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-5-11 {
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
}

/* ========================================== */
/* MARGIN SPACE */
/* ========================================== */

.m-b-space-24 {
  margin-bottom: 2.4rem;
}

.m-b-space-32 {
  margin-bottom: 3.2rem;
}

.m-b-space-48 {
  margin-bottom: 4.8rem;
}

.m-b-space-64 {
  margin-bottom: 6.4rem;
}

.m-b-space-84 {
  margin-bottom: 8.4rem;
}

.m-b-space-96 {
  margin-bottom: 9.6rem;
}