:root {
    --padding-10: 10px;
    --padding-15: 15px;
    --padding-20: 20px;
    --padding-30: 30px;
    --padding-40: 40px;
    --padding-50: 50px;
    --padding-60: 60px;
    --padding-70: 70px;
    --padding-80: 80px;
    --padding-90: 90px;
    --padding-100: 100px;
  
    --margin-10: 10px;
    --margin-20: 20px;
    --margin-30: 30px;
    --margin-40: 40px;
    --margin-50: 50px;
    --margin-60: 60px;
    --margin-70: 70px;
    --margin-80: 80px;
    --margin-90: 90px;
    --margin-100: 100px;
  }
  
  /* Padding */
  .p-t-10 { padding-top: var(--padding-10); }
  .p-t-15 { padding-top: var(--padding-15); }
  .p-t-20 { padding-top: var(--padding-20); }
  .p-t-30 { padding-top: var(--padding-30); }
  .p-t-40 { padding-top: var(--padding-40); }
  .p-t-50 { padding-top: var(--padding-50); }
  .p-t-60 { padding-top: var(--padding-60); }
  .p-t-70 { padding-top: var(--padding-70); }
  .p-t-80 { padding-top: var(--padding-80); }
  .p-t-90 { padding-top: var(--padding-90); }
  .p-t-100 { padding-top: var(--padding-100); }
  
  .p-b-10 { padding-bottom: var(--padding-10); }
  .p-b-20 { padding-bottom: var(--padding-20); }
  .p-b-30 { padding-bottom: var(--padding-30); }
  .p-b-40 { padding-bottom: var(--padding-40); }
  .p-b-50 { padding-bottom: var(--padding-50); }
  .p-b-60 { padding-bottom: var(--padding-60); }
  .p-b-70 { padding-bottom: var(--padding-70); }
  .p-b-80 { padding-bottom: var(--padding-80); }
  .p-b-90 { padding-bottom: var(--padding-90); }
  .p-b-100 { padding-bottom: var(--padding-100); }
  
  .p-l-10 { padding-left: var(--padding-10); }
  .p-l-20 { padding-left: var(--padding-20); }
  .p-l-30 { padding-left: var(--padding-30); }
  .p-l-40 { padding-left: var(--padding-40); }
  .p-l-50 { padding-left: var(--padding-50); }
  .p-l-60 { padding-left: var(--padding-60); }
  .p-l-70 { padding-left: var(--padding-70); }
  .p-l-80 { padding-left: var(--padding-80); }
  .p-l-90 { padding-left: var(--padding-90); }
  .p-l-100 { padding-left: var(--padding-100); }
  
  .p-r-10 { padding-right: var(--padding-10); }
  .p-r-20 { padding-right: var(--padding-20); }
  .p-r-30 { padding-right: var(--padding-30); }
  .p-r-40 { padding-right: var(--padding-40); }
  .p-r-50 { padding-right: var(--padding-50); }
  .p-r-60 { padding-right: var(--padding-60); }
  .p-r-70 { padding-right: var(--padding-70); }
  .p-r-80 { padding-right: var(--padding-80); }
  .p-r-90 { padding-right: var(--padding-90); }
  .p-r-100 { padding-right: var(--padding-100); }
  
  /* Margin */
  .m-t-10 { margin-top: var(--margin-10); }
  .m-t-20 { margin-top: var(--margin-20); }
  .m-t-30 { margin-top: var(--margin-30); }
  .m-t-40 { margin-top: var(--margin-40); }
  .m-t-50 { margin-top: var(--margin-50); }
  .m-t-60 { margin-top: var(--margin-60); }
  .m-t-70 { margin-top: var(--margin-70); }
  .m-t-80 { margin-top: var(--margin-80); }
  .m-t-90 { margin-top: var(--margin-90); }
  .m-t-100 { margin-top: var(--margin-100); }
  
  .m-b-10 { margin-bottom: var(--margin-10); }
  .m-b-20 { margin-bottom: var(--margin-20); }
  .m-b-30 { margin-bottom: var(--margin-30); }
  .m-b-40 { margin-bottom: var(--margin-40); }
  .m-b-50 { margin-bottom: var(--margin-50); }
  .m-b-60 { margin-bottom: var(--margin-60); }
  .m-b-70 { margin-bottom: var(--margin-70); }
  .m-b-80 { margin-bottom: var(--margin-80); }
  .m-b-90 { margin-bottom: var(--margin-90); }
  .m-b-100 { margin-bottom: var(--margin-100); }
  
  .m-l-10 { margin-left: var(--margin-10); }
  .m-l-20 { margin-left: var(--margin-20); }
  .m-l-30 { margin-left: var(--margin-30); }
  .m-l-40 { margin-left: var(--margin-40); }
  .m-l-50 { margin-left: var(--margin-50); }
  .m-l-60 { margin-left: var(--margin-60); }
  .m-l-70 { margin-left: var(--margin-70); }
  .m-l-80 { margin-left: var(--margin-80); }
  .m-l-90 { margin-left: var(--margin-90); }
  .m-l-100 { margin-left: var(--margin-100); }
  
  .m-r-10 { margin-right: var(--margin-10); }
  .m-r-20 { margin-right: var(--margin-20); }
  .m-r-30 { margin-right: var(--margin-30); }
  .m-r-40 { margin-right: var(--margin-40); }
  .m-r-50 { margin-right: var(--margin-50); }
  .m-r-60 { margin-right: var(--margin-60); }
  .m-r-70 { margin-right: var(--margin-70); }
  .m-r-80 { margin-right: var(--margin-80); }
  .m-r-90 { margin-right: var(--margin-90); }
  .m-r-100 { margin-right: var(--margin-100); }
  
  /* Flex 常用样式 */
  .flex {
    display: flex;
  }
  
  .flex-row {
    flex-direction: row;
  }
  
  .flex-col {
    flex-direction: column;
  }
  
  .flex-wrap {
    flex-wrap: wrap;
  }
  
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  
  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  
  .f-j-s {
    justify-content: flex-start;
  }
  
  .f-j-e {
    justify-content: flex-end;
  }
  
  .f-j-c {
    justify-content: center;
  }
  
  .f-j-b {
    justify-content: space-between;
  }
  
  .f-j-a {
    justify-content: space-around;
  }
  
  .f-j-ev {
    justify-content: space-evenly;
  }
  
  .f-a-s {
    align-items: flex-start;
  }
  
  .f-a-e {
    align-items: flex-end;
  }
  
  .f-a-c {
    align-items: center;
  }
  
  .f-a-b {
    align-items: baseline;
  }
  
  .f-a-st {
    align-items: stretch;
  }
  
  .f-c-s {
    align-content: flex-start;
  }
  
  .f-c-e {
    align-content: flex-end;
  }
  
  .f-c-c {
    align-content: center;
  }
  
  .f-c-b {
    align-content: space-between;
  }
  
  .f-c-a {
    align-content: space-around;
  }
  
  .f-c-st {
    align-content: stretch;
  }
  
  .f-g-1 {
    flex-grow: 1;
  }
  
  .f-g-2 {
    flex-grow: 2;
  }
  
  .f-g-3 {
    flex-grow: 3;
  }
  
  .f-s-0 {
    flex-shrink: 0;
  }
  
  .f-s-1 {
    flex-shrink: 1;
  }
  
  .f-s-2 {
    flex-shrink: 2;
  }
  
  .f-s-3 {
    flex-shrink: 3;
  }
  
  .f-b-a {
    flex-basis: auto;
  }
  
  .f-b-0 {
    flex-basis: 0;
  }
  
  .w-1160  {
    width: 1160px;
    margin: 0 auto;
  }