body * {
    box-sizing: border-box;
    flex-shrink: 0;
  }
  body {
    font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
      Arial, PingFang SC-Light, Microsoft YaHei;
  }
  input {
    background-color: transparent;
    border: 0;
  }
  button {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
    background-color: transparent;
  }
  
  button:active {
    opacity: 0.6;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .justify-start {
    display: flex;
    justify-content: flex-start;
  }
  .justify-center {
    display: flex;
    justify-content: center;
  }
  
  .justify-end {
    display: flex;
    justify-content: flex-end;
  }
  .justify-evenly {
    display: flex;
    justify-content: space-evenly;
  }
  .justify-around {
    display: flex;
    justify-content: space-around;
  }
  .justify-between {
    display: flex;
    justify-content: space-between;
  }
  .align-start {
    display: flex;
    align-items: flex-start;
  }
  .align-center {
    display: flex;
    align-items: center;
  }
  .align-end {
    display: flex;
    align-items: flex-end;
  }

.x,.x0,.x1,.x2,.x3,.x4,.x5,.x6,.x7,.x8,.x9,.x10,.x11,.x12,.xl1,.xl2,.xl3,.xl4,.xl5,.xl6,.xl7,.xl8,.xl9,.xl10,.xl11,.xl12,.xs0,.xs1,.xs2,.xs3,.xs4,.xs5,.xs6,.xs7,.xs8,.xs9,.xs10,.xs11,.xs12,.xm0,.xm1,.xm2,.xm3,.xm4,.xm5,.xm6,.xm7,.xm8,.xm9,.xm10,.xm11,.xm12,.xb0,.xb1,.xb2,.xb3,.xb4,.xb5,.xb6,.xb7,.xb8,.xb9,.xb10,.xb11,.xb12,.xg0,.xg1,.xg2,.xg3,.xg4,.xg5,.xg6,.xg7,.xg8,.xg9,.xg10,.xg11,.xg12{position:relative;width:100%}
.x{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.x0,.xl0,.xs0,.xm0,.xb0,.xg0{max-width:100%}
.x0{width:auto}
.x1{width:8.33333333%}
.x2{width:16.66666667%}
.x20{width:20%}
.x3{width:25%}
.x4{width:33.33333333%}
.x5{width:41.66666667%}
.x6{width:50%}
.x7{width:58.33333333%}
.x8{width:66.66666667%}
.x9{width:75%}
.x10{width:83.33333333%}
.x11{width:91.66666667%}
.x12{width:100%}
@media (min-width:572px){.container{max-width:540px}
.xl{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.xl0{width:auto}
.xl1{width:8.33333333%}
.xl2{width:16.66666667%}
.xl20{width:20%}
.xl3{width:25%}
.xl4{width:33.33333333%}
.xl5{width:41.66666667%}
.xl6{width:50%}
.xl7{width:58.33333333%}
.xl8{width:66.66666667%}
.xl9{width:75%}
.xl10{width:83.33333333%}
.xl11{width:91.66666667%}
.xl12{width:100%}
}@media (min-width:762px){.container{max-width:730px}
.xs{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.xs0{width:auto}
.xs1{width:8.33333333%}
.xs2{width:16.66666667%}
.xs20{width:20%}
.xs3{width:25%}
.xs4{width:33.33333333%}
.xs5{width:41.66666667%}
.xs6{width:50%}
.xs7{width:58.33333333%}
.xs8{width:66.66666667%}
.xs9{width:75%}
.xs10{width:83.33333333%}
.xs11{width:91.66666667%}
.xs12{width:100%}
}@media (min-width:992px){.container{max-width:960px}
.xm{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.xm0{width:auto}
.xm1{width:8.33333333%}
.xm2{width:16.66666667%}
.xm20{width:20%}
.xm3{width:25%}
.xm4{width:33.33333333%}
.xm5{width:41.66666667%}
.xm6{width:50%}
.xm7{width:58.33333333%}
.xm8{width:66.66666667%}
.xm9{width:75%}
.xm10{width:83.33333333%}
.xm11{width:91.66666667%}
.xm12{width:100%}
}@media (min-width:1232px){.container{max-width:1200px;padding-left:0!important;padding-right:0!important}
.xb{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.xb0{width:auto}
.xb1{width:8.33333333%}
.xb2{width:16.66666667%}
.xb20{width:20%}
.xb3{width:25%}
.xb4{width:33.33333333%}
.xb5{width:41.66666667%}
.xb6{width:50%}
.xb7{width:58.33333333%}
.xb8{width:66.66666667%}
.xb9{width:75%}
.xb10{width:83.33333333%}
.xb11{width:91.66666667%}
.xb12{width:100%}
}@media (min-width:1632px){.container{max-width:1400px}
.xg0{width:auto}
.xg1{width:8.33333333%}
.xg2{width:16.66666667%}
.xg20{width:20%}
.xg3{width:25%}
.xg4{width:33.33333333%}
.xg5{width:41.66666667%}
.xg6{width:50%}
.xg7{width:58.33333333%}
.xg8{width:66.66666667%}
.xg9{width:75%}
.xg10{width:83.33333333%}
.xg11{width:91.66666667%}
.xg12{width:100%}
}
/* fonts */
.f62{font-size:62px}
.f60{font-size:60px}
.f59{font-size:59px;}
.f56{font-size:56px;}
.f52{font-size:52px;}
.f48{font-size:48px}
.f46{font-size:46px;}
.f42{font-size:42px;}
.f40{font-size:40px;}
.f36{font-size:36px;}
.f34{font-size:34px;}
.f32{font-size:32px;}
.f30{font-size:30px;}
.f28{font-size:28px;}
.f26{font-size:26px;}
.f24{font-size:24px}
.f22{font-size:22px;}
.f20{font-size:20px;}
.f18{font-size:18px}
.f16{font-size:16px}
.pl15{padding-left: 15px;}
.p30{padding:30px 0;}
.p60{padding:60px 0;}
.pt214{padding: 214px 0 0 12%;}
.top214{top: 195px;}
.h934{height: 934px;}
.m345{margin: 345px 0 0 0;}
.m120{margin: 120px auto 0 auto;}
.mt410{margin-top: 410px;}
.whcircle{height: 128px; width: 128px;}
.mt30{margin-top: 30px;}
.m16{margin: 16px 0 0 1px;}
.m45{margin: 45px 0 0 0;}
.mt232{margin: 232px auto auto;}
@media (max-width:1660px) {
  .f56{font-size:52px;}
  .f52{font-size:50px;}
  .m45{margin: 40px 0 0 0;}
  .mt232{margin: 200px auto auto;}
}
@media (max-width:1533px) {
.f56{font-size:50px;}
.f52{font-size:48px;}
.h934{height: 900px;}
.mt410{margin-top: 283px;}
.m45{margin: 35px 0 0 0;}
.mt232{margin: 150px auto auto;}
}
@media (max-width:1400px) {
.f62{font-size:40px}
.f60{font-size:38px}
.f59{font-size:37px;}
.f56{font-size:39px;}
.f52{font-size:37px;}
.f48{font-size:35px}
.f46{font-size:32px;}
.f42{font-size:28px;}
.f40{font-size:26px;}
.f36{font-size:25px;}
.f34{font-size:24px;}
.f32{font-size:23px;}
.f30{font-size:23px;}
.f28{font-size:24px;}
.f26{font-size:22px;}
.f22{font-size:21px;}
.f24{font-size:20px}
.f20{font-size:18px;}
.f18{font-size:16px}
.f16{font-size:15px}
.pl15{padding-left: 12px;}
.p30{padding:20px 0;}
.p60{padding:25px 0;}
.pt214{padding: 195px 0 0 12%;}
.top214{top: 195px;}
.h934{height: 750px;}
.m120{margin: 80px auto 0 auto;}
.m345{margin: 300px 0 0 0;}
.whcircle{height: 100px; width: 100px;}
.mt410{margin-top: 300px;}
.mt30{margin-top: 0;}
.m16{margin: 8px 0 0 1px;}
.m45{margin: 30px 0 0 1px;}
.mt232{margin: 100px auto auto;}
}
@media screen and (max-width:1100px) {
.f62{font-size:28px}
.f60{font-size:26px}
.f59{font-size:25px;}
.f56{font-size:39px;}
.f48{font-size:23px}
.f46{font-size:22px;}
.f42{font-size:21px;}
.f40{font-size:21px;}
.f36{font-size:20px;}
.f34{font-size:21px;}
.f32{font-size:20px;}
.f30{font-size:19px;}
.f28{font-size:19px;}
.f26{font-size:18px;}
.f24{font-size:17px}
.f22{font-size:16px;}
.f20{font-size:15px;}
.f18{font-size:14px}
.f16{font-size:13px}
.pl15{padding-left: 10px;}
.p60{padding:30px 0;}
.pt214{padding: 155px 0 0 12%;}
.top214{top: 155px;}
.h934{height: 600px;}
.m120{margin: 60px auto 0 auto;}
.m345{margin: 200px 0 0 0;}
.whcircle{height: 80px; width: 80px;}
.mt232{margin: 50px auto auto;}
}