/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}
.animated {
  transition: opacity .5s,background-color .5s;  /* 2s表示动画持续时间,多个属性之间用","号隔开 */
  transition: opacity .5s linear;    /* 匀速变化(默认速度由快变慢) */		
  transition: opacity .5s linear .5s;   /* 1s表示延迟变化 */		
  transition: all .5s; 
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace,monospace;
  font-size: 1em
}

a {
  background-color: transparent
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

b,strong {
  font-weight: bolder
}

code,kbd,samp {
  font-family: monospace,monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

img {
  border-style: none
}

button,input,optgroup,select,textarea {
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,input {
  overflow: visible
}

button,select {
  text-transform: none
}

[type=button],[type=reset],[type=submit],button {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox],[type=radio] {
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

[hidden],template {
  display: none
}

*,:after,:before {
  box-sizing: border-box
}

:focus {
  outline: none
}

blockquote,body,button,dd,div,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,li,ol,p,pre,td,th,ul {
  margin: 0;
  padding: 0
}

li,ol,ul {
  list-style-type: none
}

button,input,optgroup,select,textarea {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  outline: none;
  border-radius: unset
}

a,button,input,label,select,summary,textarea {
  touch-action: manipulation
}

img,svg,video {
  vertical-align: middle
}

audio,embed,iframe,img,object,video {
  max-width: 100%
}

iframe {
  border: 0
}

:root {
  --gutter: 32px;
  --column: 12
}

.grid-inspector {
  pointer-events: none;
  z-index: 10000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .25
}

.grid-inspector .col,.grid-inspector .layout-max,.grid-inspector .row {
  height: 100%
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--gutter)/2*-1)
}

.row.nowrap {
  flex-wrap: nowrap
}

.row.debug .col {
  background: #fff8e3;
  box-shadow: inset 1px 0 0 #ffac59,inset -1px 0 0 #ffac59,inset calc(var(--gutter)/2) 0 0 #ffe6b5,inset calc(var(--gutter)/2*-1) 0 0 #ffe6b5,inset 0 1px 0 #ffe6b5,inset 0 -1px 0 #ffe6b5
}

.col {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 calc(var(--gutter)/2)
}

.col-xs-1 {
  flex: 0 0 calc(1/var(--column)*100%);
  max-width: calc(1/var(--column)*100%)
}

.col-xs-2 {
  flex: 0 0 calc(2/var(--column)*100%);
  max-width: calc(2/var(--column)*100%)
}

.col-xs-3 {
  flex: 0 0 calc(3/var(--column)*100%);
  max-width: calc(3/var(--column)*100%)
}

.col-xs-4 {
  flex: 0 0 calc(4/var(--column)*100%);
  max-width: calc(4/var(--column)*100%)
}

.col-xs-5 {
  flex: 0 0 calc(5/var(--column)*100%);
  max-width: calc(5/var(--column)*100%)
}

.col-xs-6 {
  flex: 0 0 calc(6/var(--column)*100%);
  max-width: calc(6/var(--column)*100%)
}

.col-xs-7 {
  flex: 0 0 calc(7/var(--column)*100%);
  max-width: calc(7/var(--column)*100%)
}

.col-xs-8 {
  flex: 0 0 calc(8/var(--column)*100%);
  max-width: calc(8/var(--column)*100%)
}

.col-xs-9 {
  flex: 0 0 calc(9/var(--column)*100%);
  max-width: calc(9/var(--column)*100%)
}

.col-xs-10 {
  flex: 0 0 calc(10/var(--column)*100%);
  max-width: calc(10/var(--column)*100%)
}

.col-xs-11 {
  flex: 0 0 calc(11/var(--column)*100%);
  max-width: calc(11/var(--column)*100%)
}

.col-xs-12 {
  flex: 0 0 calc(12/var(--column)*100%);
  max-width: calc(12/var(--column)*100%)
}

.col-xs-offset-0 {
  margin-left: 0
}

.col-xs-offset-1 {
  margin-left: calc(1/var(--column)*100%)
}

.col-xs-offset-2 {
  margin-left: calc(2/var(--column)*100%)
}

.col-xs-offset-3 {
  margin-left: calc(3/var(--column)*100%)
}

.col-xs-offset-4 {
  margin-left: calc(4/var(--column)*100%)
}

.col-xs-offset-5 {
  margin-left: calc(5/var(--column)*100%)
}

.col-xs-offset-6 {
  margin-left: calc(6/var(--column)*100%)
}

.col-xs-offset-7 {
  margin-left: calc(7/var(--column)*100%)
}

.col-xs-offset-8 {
  margin-left: calc(8/var(--column)*100%)
}

.col-xs-offset-9 {
  margin-left: calc(9/var(--column)*100%)
}

.col-xs-offset-10 {
  margin-left: calc(10/var(--column)*100%)
}

.col-xs-offset-11 {
  margin-left: calc(11/var(--column)*100%)
}

.col-xs-offset-12 {
  margin-left: calc(12/var(--column)*100%)
}

@media (min-width: 768px) {
  .col-sm-1 {
      flex:0 0 calc(1/var(--column)*100%);
      max-width: calc(1/var(--column)*100%)
  }

  .col-sm-2 {
      flex: 0 0 calc(2/var(--column)*100%);
      max-width: calc(2/var(--column)*100%)
  }

  .col-sm-3 {
      flex: 0 0 calc(3/var(--column)*100%);
      max-width: calc(3/var(--column)*100%)
  }

  .col-sm-4 {
      flex: 0 0 calc(4/var(--column)*100%);
      max-width: calc(4/var(--column)*100%)
  }

  .col-sm-5 {
      flex: 0 0 calc(5/var(--column)*100%);
      max-width: calc(5/var(--column)*100%)
  }

  .col-sm-6 {
      flex: 0 0 calc(6/var(--column)*100%);
      max-width: calc(6/var(--column)*100%)
  }

  .col-sm-7 {
      flex: 0 0 calc(7/var(--column)*100%);
      max-width: calc(7/var(--column)*100%)
  }

  .col-sm-8 {
      flex: 0 0 calc(8/var(--column)*100%);
      max-width: calc(8/var(--column)*100%)
  }

  .col-sm-9 {
      flex: 0 0 calc(9/var(--column)*100%);
      max-width: calc(9/var(--column)*100%)
  }

  .col-sm-10 {
      flex: 0 0 calc(10/var(--column)*100%);
      max-width: calc(10/var(--column)*100%)
  }

  .col-sm-11 {
      flex: 0 0 calc(11/var(--column)*100%);
      max-width: calc(11/var(--column)*100%)
  }

  .col-sm-12 {
      flex: 0 0 calc(12/var(--column)*100%);
      max-width: calc(12/var(--column)*100%)
  }

  .col-sm-offset-0 {
      margin-left: 0
  }

  .col-sm-offset-1 {
      margin-left: calc(1/var(--column)*100%)
  }

  .col-sm-offset-2 {
      margin-left: calc(2/var(--column)*100%)
  }

  .col-sm-offset-3 {
      margin-left: calc(3/var(--column)*100%)
  }

  .col-sm-offset-4 {
      margin-left: calc(4/var(--column)*100%)
  }

  .col-sm-offset-5 {
      margin-left: calc(5/var(--column)*100%)
  }

  .col-sm-offset-6 {
      margin-left: calc(6/var(--column)*100%)
  }

  .col-sm-offset-7 {
      margin-left: calc(7/var(--column)*100%)
  }

  .col-sm-offset-8 {
      margin-left: calc(8/var(--column)*100%)
  }

  .col-sm-offset-9 {
      margin-left: calc(9/var(--column)*100%)
  }

  .col-sm-offset-10 {
      margin-left: calc(10/var(--column)*100%)
  }

  .col-sm-offset-11 {
      margin-left: calc(11/var(--column)*100%)
  }

  .col-sm-offset-12 {
      margin-left: calc(12/var(--column)*100%)
  }
}

@media (min-width: 1024px) {
  .col-md-1 {
      flex:0 0 calc(1/var(--column)*100%);
      max-width: calc(1/var(--column)*100%)
  }

  .col-md-2 {
      flex: 0 0 calc(2/var(--column)*100%);
      max-width: calc(2/var(--column)*100%)
  }

  .col-md-3 {
      flex: 0 0 calc(3/var(--column)*100%);
      max-width: calc(3/var(--column)*100%)
  }

  .col-md-4 {
      flex: 0 0 calc(4/var(--column)*100%);
      max-width: calc(4/var(--column)*100%)
  }

  .col-md-5 {
      flex: 0 0 calc(5/var(--column)*100%);
      max-width: calc(5/var(--column)*100%)
  }

  .col-md-6 {
      flex: 0 0 calc(6/var(--column)*100%);
      max-width: calc(6/var(--column)*100%)
  }

  .col-md-7 {
      flex: 0 0 calc(7/var(--column)*100%);
      max-width: calc(7/var(--column)*100%)
  }

  .col-md-8 {
      flex: 0 0 calc(8/var(--column)*100%);
      max-width: calc(8/var(--column)*100%)
  }

  .col-md-9 {
      flex: 0 0 calc(9/var(--column)*100%);
      max-width: calc(9/var(--column)*100%)
  }

  .col-md-10 {
      flex: 0 0 calc(10/var(--column)*100%);
      max-width: calc(10/var(--column)*100%)
  }

  .col-md-11 {
      flex: 0 0 calc(11/var(--column)*100%);
      max-width: calc(11/var(--column)*100%)
  }

  .col-md-12 {
      flex: 0 0 calc(12/var(--column)*100%);
      max-width: calc(12/var(--column)*100%)
  }

  .col-md-offset-0 {
      margin-left: 0
  }

  .col-md-offset-1 {
      margin-left: calc(1/var(--column)*100%)
  }

  .col-md-offset-2 {
      margin-left: calc(2/var(--column)*100%)
  }

  .col-md-offset-3 {
      margin-left: calc(3/var(--column)*100%)
  }

  .col-md-offset-4 {
      margin-left: calc(4/var(--column)*100%)
  }

  .col-md-offset-5 {
      margin-left: calc(5/var(--column)*100%)
  }

  .col-md-offset-6 {
      margin-left: calc(6/var(--column)*100%)
  }

  .col-md-offset-7 {
      margin-left: calc(7/var(--column)*100%)
  }

  .col-md-offset-8 {
      margin-left: calc(8/var(--column)*100%)
  }

  .col-md-offset-9 {
      margin-left: calc(9/var(--column)*100%)
  }

  .col-md-offset-10 {
      margin-left: calc(10/var(--column)*100%)
  }

  .col-md-offset-11 {
      margin-left: calc(11/var(--column)*100%)
  }

  .col-md-offset-12 {
      margin-left: calc(12/var(--column)*100%)
  }
}

@media (min-width: 1200px) {
  .col-lg-1 {
      flex:0 0 calc(1/var(--column)*100%);
      max-width: calc(1/var(--column)*100%)
  }

  .col-lg-2 {
      flex: 0 0 calc(2/var(--column)*99.9%);
      max-width: calc(2/var(--column)*100%)
  }

  .col-lg-3 {
      flex: 0 0 calc(3/var(--column)*100%);
      max-width: calc(3/var(--column)*100%)
  }

  .col-lg-4 {
      flex: 0 0 calc(4/var(--column)*100%);
      max-width: calc(4/var(--column)*100%)
  }

  .col-lg-5 {
      flex: 0 0 calc(5/var(--column)*100%);
      max-width: calc(5/var(--column)*100%)
  }

  .col-lg-6 {
      flex: 0 0 calc(6/var(--column)*100%);
      max-width: calc(6/var(--column)*100%)
  }

  .col-lg-7 {
      flex: 0 0 calc(7/var(--column)*100%);
      max-width: calc(7/var(--column)*100%)
  }

  .col-lg-8 {
      flex: 0 0 calc(8/var(--column)*100%);
      max-width: calc(8/var(--column)*100%)
  }

  .col-lg-9 {
      flex: 0 0 calc(9/var(--column)*100%);
      max-width: calc(9/var(--column)*100%)
  }

  .col-lg-10 {
      flex: 0 0 calc(10/var(--column)*100%);
      max-width: calc(10/var(--column)*100%)
  }

  .col-lg-11 {
      flex: 0 0 calc(11/var(--column)*100%);
      max-width: calc(11/var(--column)*100%)
  }

  .col-lg-12 {
      flex: 0 0 calc(12/var(--column)*100%);
      max-width: calc(12/var(--column)*100%)
  }

  .col-lg-offset-0 {
      margin-left: 0
  }

  .col-lg-offset-1 {
      margin-left: calc(1/var(--column)*100%)
  }

  .col-lg-offset-2 {
      margin-left: calc(2/var(--column)*100%)
  }

  .col-lg-offset-3 {
      margin-left: calc(3/var(--column)*100%)
  }

  .col-lg-offset-4 {
      margin-left: calc(4/var(--column)*100%)
  }

  .col-lg-offset-5 {
      margin-left: calc(5/var(--column)*100%)
  }

  .col-lg-offset-6 {
      margin-left: calc(6/var(--column)*100%)
  }

  .col-lg-offset-7 {
      margin-left: calc(7/var(--column)*100%)
  }

  .col-lg-offset-8 {
      margin-left: calc(8/var(--column)*100%)
  }

  .col-lg-offset-9 {
      margin-left: calc(9/var(--column)*100%)
  }

  .col-lg-offset-10 {
      margin-left: calc(10/var(--column)*100%)
  }

  .col-lg-offset-11 {
      margin-left: calc(11/var(--column)*100%)
  }

  .col-lg-offset-12 {
      margin-left: calc(12/var(--column)*100%)
  }
}

@font-face {
  font-family: Indivisible Web;
  src: url(/static/IndivisibleWebRegular-786120619e4d2b812e2181d565dda3cc.eot);
  src: url(/static/IndivisibleWebRegular-786120619e4d2b812e2181d565dda3cc.eot?#iefix) format("embedded-opentype"),url(/static/IndivisibleWebRegular-dd8cf0784ad7e70ec75b085f895aa355.woff2) format("woff2"),url(/static/IndivisibleWebRegular-56d11126a0fa90155a0633282e55ed2c.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Indivisible Web;
  src: url(/static/IndivisibleWebSemiBold-2627e33bb4c8abed3607331f2d0bb0ff.eot);
  src: url(/static/IndivisibleWebSemiBold-2627e33bb4c8abed3607331f2d0bb0ff.eot?#iefix) format("embedded-opentype"),url(/static/IndivisibleWebSemiBold-5e174c30e6443cf61e0b8baa7b5bedf4.woff2) format("woff2"),url(/static/IndivisibleWebSemiBold-4067eaa63f6b28a361c683064ffcb8a5.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: Indivisible Web;
  src: url(/static/IndivisibleWebBlack-a30316a6653a6e38ca23a843a8182a3f.eot);
  src: url(/static/IndivisibleWebBlack-a30316a6653a6e38ca23a843a8182a3f.eot?#iefix) format("embedded-opentype"),url(/static/IndivisibleWebBlack-ece6f0da1e8f540d5d82ead78592bbf8.woff2) format("woff2"),url(/static/IndivisibleWebBlack-9d359d374fa3d4b13ceef244022c1103.woff) format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap
}

.dev-placeholder {
  background-color: var(--page-theme-color);
  height: var(--hero-height);
  border: 1px solid rgba(10,10,10,.05);
  display: flex;
  align-items: center;
  justify-content: center
}

.dev-bar {
  font-size: 12px;
  z-index: 1000;
  position: fixed;
  left: 1em;
  bottom: 1em;
  padding: .5em .75em;
  font-family: SF Mono;
  background-color: #0f0;
  border-radius: .25em
}

:root {
  --font-family: "Indivisible Web","SF Pro Text","PingFang SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --font-family-heading: "Indivisible Web","SF Pro Text","PingFang SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --form-font-family: "SF Pro Text","PingFang SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --light: 300;
  --regular: 400;
  --semibold: 600;
  --bold: 800;
  --font-size-h1: 32px;
  --line-height-h1: 44px;
  --font-size-h2: 24px;
  --line-height-h2: 32px;
  --font-size-h3: 18px;
  --line-height-h3: 24px;
  --font-size-quote: 28px;
  --line-height-quote: 56px;
  --font-size-label: 14px;
  --line-height-label: 20px;
  --font-size-body: 16px;
  --line-height-body: 20px;
  --font-size-p-short: var(--font-size-body);
  --line-height-p-short: 32px;
  --font-size-p-long: var(--font-size-body);
  --line-height-p-long: 24px;
  --font-size-description: 14px;
  --line-height-description: 24px;
  --edge: 24px;
  --row-gap: 20vw;
  --hero-height: 640px;
  --color-primary-purple: #5a32d2;
  --color-primary-black: #0a0a0a;
  --color-primary-white: #fff;
  --color-secondary-blue: #0057da;
  --color-secondary-green: #4db884;
  --color-secondary-yellow: #ffd748;
  --color-secondary-orange: #f29764;
  --color-secondary-red: #ec4f45;
  --color-secondary-beige-text: #a89258;
  --color-secondary-beige: #c8b582;
  --color-secondary-gray: #f0efe4;
  --color-gray-black: #000;
  --color-gray-black-50: rgba(10,10,10,0.5);
  --color-gray-white-50: hsla(0,0%,100%,0.5);
  --color-gray-white-75: hsla(0,0%,100%,0.75);
  --color-gray-gray-900: #0a0a0a;
  --color-gray-gray-800: #333;
  --color-gray-gray-700: #4d4d4d;
  --color-gray-gray-600: #666;
  --color-gray-gray-500: grey;
  --color-gray-gray-400: #a3a3a3;
  --color-gray-gray-300: #b3b3b3;
  --color-gray-gray-100: #eaeaea;
  --color-gray-gray-50: #f4f4f4;
  --color-purple-purple-600: #4025aa;
  --color-purple-purple-500: #5a32d2;
  --color-purple-purple-400: #8550ee;
  --color-purple-purple-300: #a874fc;
  --color-purple-purple-200: #c59bfd;
  --color-purple-purple-100: #eddcff;
  --color-purple-gray-100: #dedde9;
  --color-purple-gray-50: #efeff4;
  --color-blue-blue-600: #0057da;
  --color-blue-blue-500: #0179f0;
  --color-blue-blue-400: #16a4fc;
  --color-blue-blue-300: #4dcff6;
  --color-blue-blue-200: #88e6f9;
  --color-blue-blue-100: #b5f4fa;
  --color-blue-gray-200: #a0abb9;
  --color-blue-gray-100: #e0ebee;
  --color-blue-gray-50: #eff4f4;
  --color-beige-beige-500: #7b6832;
  --color-beige-beige-400: #a08b52;
  --color-beige-beige-300: #b4a16f;
  --color-beige-beige-200: #c8b582;
  --color-beige-beige-100: #e0d9b8;
  --color-beige-gray-100: #f2f0e3;
  --color-beige-gray-50: #f5f5ec;
  --elevation-low: 0px 6px 16px rgba(0,0,0,0.08),0px 0px 6px rgba(0,0,0,0.08);
  --elevation-medium: 0px 12px 24px rgba(0,0,0,0.16);
  --elevation-high: 0px 16px 64px rgba(0,0,0,0.16);
  --page-theme-color: var(--color-gray-gray-50)
}

@media (min-width: 768px) {
  :root {
      --font-size-h1:40px;
      --line-height-h1: 52px;
      --font-size-h2: 28px;
      --line-height-h2: 36px;
      --font-size-h3: 18px;
      --line-height-h3: 24px;
      --font-size-quote: 32px;
      --line-height-quote: 64px;
      --font-size-label: 14px;
      --line-height-label: 24px;
      --font-size-body: 16px;
      --line-height-body: 20px;
      --font-size-p-short: var(--font-size-body);
      --line-height-p-short: 32px;
      --font-size-p-long: var(--font-size-body);
      --line-height-p-long: 24px;
      --font-size-description: 14px;
      --line-height-description: 24px;
      --edge: 48px;
      --row-gap: 10vw;
      --hero-height: calc(100vh - 80px)
  }
}

@media (min-width: 1024px) {
  :root {
      --font-size-h1:48px;
      --line-height-h1: 64px;
      --font-size-h2: 32px;
      --line-height-h2: 44px;
      --font-size-h3: 20px;
      --line-height-h3: 28px;
      --font-size-quote: 40px;
      --line-height-quote: 80px;
      --font-size-label: 16px;
      --line-height-label: 24px;
      --font-size-body: 18px;
      --line-height-body: 22px;
      --font-size-p-short: var(--font-size-body);
      --line-height-p-short: 36px;
      --font-size-p-long: var(--font-size-body);
      --line-height-p-long: 28px;
      --font-size-description: 14px;
      --line-height-description: 24px;
      --edge: 64px;
      --hero-height: calc(100vh - 84px)
  }
}

@media (min-width: 1920px) {
  :root {
      --row-gap:px;
      --hero-height: 1080px
  }
}

@media (min-height: 1080px) {
  :root {
      --hero-height:1080px
  }
}

html {
  font-size: var(--font-size-body);
  font-family: var(--font-family);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

a {
  color: var(--color-primary-black);
  text-decoration: none
}

.heading,h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1)
}

.heading,h1,h2 {
  font-family: var(--font-family-heading);
  font-weight: 400
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2)
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--semibold)
}

.quote,h3 {
  font-family: var(--font-family-heading)
}

.quote {
  font-size: var(--font-size-quote);
  line-height: var(--line-height-quote)
}

.label {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: var(--semibold)
}

.short {
  font-size: var(--font-size-p-short);
  line-height: var(--line-height-p-short);
  color: var(--color-gray-black-50)
}

.long {
  font-size: var(--font-size-p-long);
  line-height: var(--line-height-p-long)
}

.description {
  font-size: var(--font-size-description);
  line-height: var(--line-height-description);
  color: var(--color-gray-black-50)
}

.vh {
  position: absolute;
  clip: rect(1px,1px,1px,1px);
  -webkit-clip-path: inset(0 0 99.9% 99.9%);
  clip-path: inset(0 0 99.9% 99.9%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
  top: 50%
}



.heading~h2,h1~h2 {
  margin-top: calc(var(--font-size-h1)*1.5)
}

.heading~h3,h1~h3 {
  margin-top: var(--font-size-h1)
}

.heading~.description,.heading~.short,h1~.description,h1~.short {
  margin-top: calc(var(--font-size-h1)*0.66667)
}

.heading~ul,h1~ul {
  margin-top: var(--font-size-h1)
}

.heading~.elements-button,.heading~a,h1~.elements-button,h1~a {
  margin-top: calc(var(--font-size-h1)*0.66667)
}

h2~h3 {
  margin-top: calc(var(--font-size-h2)*1.5)
}

h2~.description,h2~.short {
  margin-top: calc(var(--font-size-h2)*0.66667)
}

h2~ul {
  margin-top: var(--font-size-h2)
}

h3~h3 {
  margin-top: var(--font-size-h3)
}

h3~.description,h3~.short {
  margin-top: calc(var(--font-size-h3)*0.5)
}

h3~ul {
  margin-top: var(--font-size-h3)
}

.elements-heading-tag+.heading,.elements-heading-tag+h1,.elements-product-logo+.heading,.elements-product-logo+h1 {
  margin-top: calc(var(--font-size-h1)*0.33333)
}

.elements-heading-tag+h2,.elements-product-logo+h2 {
  margin-top: calc(var(--font-size-h2)*0.33333)
}

.elements-heading-tag+h3,.elements-product-logo+h3 {
  margin-top: calc(var(--font-size-h3)*0.33333)
}

.elements-product-logo.large+.heading,.elements-product-logo.large+h1 {
  margin-top: calc(var(--font-size-h1)*0.5)
}

.elements-product-logo.large+h2 {
  margin-top: calc(var(--font-size-h2)*0.5)
}

.elements-product-logo.large+h3 {
  margin-top: calc(var(--font-size-h3)*0.5)
}

.elements-button:hover,.global-hero-video-play-button-icon:hover,a:hover {
  opacity: .8;
  transition: opacity .15s ease
}

.elements-heading-tag {
  color: var(--color-blue-gray-200);
  display: inline-flex;
  align-items: center
}

.elements-heading-tag .tag-decoration {
  margin-left: .5em;
  display: inline-block;
  transform: skewX(-30deg);
  width: 40px;
  height: 4px;
  background: var(--color-blue-gray-200)
}

.elements-heading-tag span {
  flex: none
}

.elements-product-logo {
  display: flex;
  align-items: center;
  font-family: var(--font-family-heading)
}

.elements-product-logo>* {
  flex-shrink: 0;
  white-space: nowrap
}

.elements-product-logo h1 {
  font-size: var(--font-size-h2);
  font-weight: 400
}

.elements-product-logo .g7-logo {
  margin-right: .25em;
  fill: var(--color-primary-black);
  height: .85em;
  width: auto
}

.elements-product-logo.large {
  font-size: var(--font-size-h2)
}

.elements-product-logo.large .g7-logo {
  position: relative;
  top: -.075em
}

.elements-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  padding: .6em 1.5em;
  background-color: var(--color-primary-black);
  color: var(--color-primary-white);
  border: 2px solid transparent
}

.elements-button.large {
  padding: 1em 2.5em
}

.elements-button .label {
  line-height: normal
}

.elements-button svg {
  margin-left: 1em;
  fill: var(--color-primary-white)
}

.elements-button.ghost {
  background-color: transparent;
  border: 2px solid var(--color-primary-black);
  color: var(--color-primary-black)
}

.elements-button.ghost svg {
  fill: var(--color-primary-black)
}

.elements-button.withPlayArrow {
  padding-right: 1em
}

input[type=email],input[type=password],input[type=text],textarea {
  background-color: var(--color-gray-gray-50);
  padding: 1em;
  border: 1px solid transparent
}

input[type=email].error,input[type=password].error,input[type=text].error,textarea.error {
  background-color: var(--color-primary-white);
  border: 1px solid var(--color-secondary-red)
}

select {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAADFBMVEUAAAAKCgoKCgoKCgoGTKFvAAAAA3RSTlMAgJ+hRdJAAAAAT0lEQVQY02OgIWAFEROAWN6BgYHpC4hxgYGBG8RgBxL6QA4D418Ghv0OIIX1DkxANlgRSAlYEUgJWBFICVgRUAlE0Rcog/0ClMHowEADAACy6xMaii5aXwAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: right 1em center;
  padding: .6em 2.5em .6em 1.5em
}

input[type=date],input[type=text].input-type-date,select {
  height: 3em;
  background-color: transparent;
  border: 2px solid var(--color-primary-black);
  color: var(--color-primary-black)
}

input[type=date],input[type=text].input-type-date {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: .6em 1.5em
}

input[type=checkbox],input[type=radio] {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid #0a0a0a
}

input[type=checkbox]:checked,input[type=radio]:checked {
  border: 2px solid #5a32d2;
  box-shadow: inset 0 0 0 3px #fff;
  background: #5a32d2;
  box-sizing: border-box
}

input[type=radio] {
  border-radius: 100px
}

.global-header {
  z-index: 1000;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  font-size: var(--font-size-label)
}

.global-header .nav-bar {
  background: var(--color-primary-white);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.global-header .nav-bar .logo {
  display: flex;
  align-items: center;
  padding: 24px
}

@media (min-width: 1200px) {
  .global-header .nav-bar .logo {
      margin:.5em 1.5em .5em 3em
  }
}

.global-header .nav-bar .logo svg {
  fill: var(--color-primary-black);
  height: var(--font-size-h3);
  width: auto
}

.global-header .nav-bar .action {
  margin: 16px 16px 16px auto;
  display: flex;
  align-items: center
}

.global-header .nav-bar .action>*+* {
  margin-left: 2em
}

@media (min-width: 1200px) {
  .global-header .nav-bar .action {
      margin:16px 64px 16px 32px
  }
}

.global-header .nav-bar nav.desktop {
  z-index: 10;
  flex: 1 1;
  display: flex;
  align-items: center
}

@media not all and (min-width: 1080px) {
  .global-header .nav-bar nav.desktop {
      display:none
  }
}

.global-header .nav-bar nav.desktop :focus {
  border: none;
  outline: none
}

.global-header .nav-bar nav.desktop .active {
  color: var(--color-primary-purple)
}

.global-header .nav-bar nav.desktop .nav-item,.global-header .nav-bar nav.desktop>a {
  cursor: pointer;
  padding: 1em;
  margin: .5em;
  white-space: nowrap
}

@media not all and (min-width: 1300px) {
  .global-header .nav-bar nav.desktop .nav-item,.global-header .nav-bar nav.desktop>a {
      padding:.5em
  }
}

.global-header .nav-bar nav.desktop .nav-group {
  position: relative
}

.global-header .nav-bar nav.desktop .nav-group .group-name {
  display: flex;
  align-items: center
}

.global-header .nav-bar nav.desktop .nav-group .group-name svg {
  margin-left: .65em
}

.global-header .nav-bar nav.desktop .nav-group .group-name.active {
  color: var(--color-primary-purple)
}

.global-header .nav-bar .list-container {
  position: fixed;
  top: 4em
}

.global-header .nav-bar .list-container.show {
  display: block
}

.global-header .nav-bar .list-container .list {
  overflow: hidden;
  box-shadow: var(--elevation-low);
  background: var(--color-primary-white);
  display: flex;
  flex-flow: column;
  padding: .5em 0;
  width: calc(16.66667vw - 16px)
}

@media (min-width: 1440px) {
  .global-header .nav-bar .list-container .list {
      width:224px
  }
}

.global-header .nav-bar .list-container .list>* {
  padding: 1em 1.5em;
  transition: background-color,opacity .15s ease
}

.global-header .nav-bar .list-container .list>:hover {
  background: var(--color-gray-gray-50);
  opacity: .8
}

.global-header .nav-bar .list-container .list>:active {
  background: var(--color-gray-gray-100)
}

.global-header .nav-bar .burger {
  padding: 16px 24px 16px 8px
}

@media (min-width: 1080px) {
  .global-header .nav-bar .burger {
      display:none
  }
}

.global-header nav.phone {
  z-index: 100;
  background: var(--color-primary-white);
  padding: 24px;
  position: fixed;
  opacity: 1;
  top: 72px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-flow: column
}

.global-header nav.phone .item:first-child .group-name {
  margin-top: 0
}

.global-header nav.phone .item:last-child {
  margin-bottom: 64px
}

.global-header nav.phone .group-name {
  font-size: var(--font-size-label);
  color: var(--color-gray-black-50);
  margin-top: .5em
}

.global-header nav.phone a {
  display: block;
  padding: 1em 0;
  font-size: var(--font-size-h3)
}

.global-header nav.phone .group {
  display: flex;
  flex-flow: column
}

.global-header .overlayer {
  background: rgba(0,0,0,.25);
  z-index: -10;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.global-header .lang-menu-desktop {
  cursor: pointer;
  padding: .5em;
  white-space: nowrap
}

.global-header .lang-menu-desktop .lang-item {
  cursor: pointer
}

.global-header .lang-menu-desktop svg {
  margin-right: .25em
}

@media not all and (min-width: 1080px) {
  .global-header .lang-menu-desktop {
      display:none
  }
}

.global-header .lang-menu-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background: var(--color-primary-white);
  border-top: 1px solid var(--color-gray-gray-50);
  font-size: var(--font-size-h3);
  margin-top: 1em;
  padding: 1em
}

.global-header .lang-menu-mobile .lang-item {
  cursor: pointer
}

.global-header .lang-menu-mobile>*+* {
  margin-left: 1.5em
}

@media (min-width: 1200px) {
  .global-header .lang-menu-mobile,.global-header .overlayer,.global-header nav.phone {
      display:none
  }
}

.global-header .list a,.global-header .nav-item {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.global-footer {
  padding: var(--font-size-h1) 0 var(--row-gap);
  background: var(--color-primary-black)
}

.global-footer a {
  color: var(--color-primary-white)
}

.global-footer .g7-logo {
  fill: var(--color-primary-white);
  height: var(--font-size-h3);
  width: auto
}

@media not all and (min-width: 1200px) {
  .global-footer .col+.col {
      margin-top:3em
  }
}

.global-footer .link-group {
  font-size: var(--font-size-description)
}

.global-footer .link-group .group-name {
  margin-bottom: 2em;
  color: var(--color-gray-white-50)
}

.global-footer .link-group .link-container p {
  margin-bottom: 1.75em
}

.global-footer .link-group .contact-item {
  font-size: var(--font-size-label)
}

.global-footer .link-group .contact-item+.contact-item {
  margin-top: 1.5em
}

.global-footer .link-group .contact-item .description {
  margin-top: .5em
}

.global-footer .link-group:hover .icon-group {
  opacity: .1
}

.global-footer .link-group:hover .icon-group:hover {
  opacity: 1
}

.global-footer .info {
  margin-top: 3em
}

.global-footer .info p+p {
  margin-top: 1.25em
}

.global-footer .icon-group {
  display: flex;
  align-items: center;
  padding-bottom: 2em;
  transition: opacity .3s ease
}

@media not all and (min-width: 768px) {
  .global-footer .icon-group {
      opacity:1!important
  }
}

.global-footer .global-qrcode {
  text-align: left
}

.global-footer .global-qrcode img,.global-footer .global-qrcode span {
  width: 50%
}

.global-footer-cta {
  background: var(--page-theme-color);
  height: calc(var(--hero-height)/3)
}

.global-footer-cta .layout-max {
  position: relative;
  top: 50%;
  transform: translateY(-50%)
}

.global-footer-cta .content {
  text-align: center
}

.global-footer-cta .content h2 {
  margin-bottom: 1.5em
}

@media (min-width: 1320px) {
  .global-footer-cta .content {
      text-align:left;
      display: flex;
      align-items: center;
      justify-content: space-between
  }

  .global-footer-cta .content h2 {
      margin-bottom: 0
  }
}

.global-footer-cta .content .action .elements-button+.elements-button {
  margin-left: 1.5em
}

@media not all and (min-width: 420px) {
  .global-footer-cta .content .action {
      display:flex;
      flex-flow: column
  }

  .global-footer-cta .content .action .elements-button {
      display: flex;
      justify-content: center
  }

  .global-footer-cta .content .action .elements-button+.elements-button {
      margin-left: 0;
      margin-top: 1.5em
  }
}

.global-learn-more .content {
  padding: calc(var(--font-size-h2)*2) calc(var(--font-size-h2)*3);
  background: var(--page-theme-color)
}

@media not all and (min-width: 768px) {
  .global-learn-more .content {
      display:flex;
      flex-flow: column;
      align-items: center;
      text-align: center
  }

  .global-learn-more .content h2 {
      margin-bottom: 1em
  }
}

@media (min-width: 768px) {
  .global-learn-more .content {
      display:flex;
      justify-content: space-between;
      align-items: center
  }
}

.global-learn-more .content .icon-arrow-long {
  width: auto;
  height: calc(var(--font-size-h2)*2)
}

.global-learn-more .content .icon-arrow-long circle {
  fill: var(--color-primary-black)
}

.global-learn-more .content .icon-arrow-long path {
  fill: var(--color-primary-white)
}

.global-clients-title {
  text-align: center;
  margin-bottom: var(--font-size-h1);
  font-size: var(--font-size-h3);
  letter-spacing: .25em
}

.global-clients-title .hack-font-indivisible-into-LTH {
  margin: 0 .125em
}

.global-clients {
  margin: var(--row-gap) 0
}

.global-clients .logo-group {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none
}

.global-clients .logo-group img {
  height: var(--font-size-h1);
  width: auto
}

.global-clients .logo-group .break {
  flex-basis: 100%;
  height: 0
}

@media not all and (min-width: 768px) {
  .global-clients .logo-group .break {
      display:none
  }
}

@media not all and (min-width: 768px) {
  .global-clients .logo-group {
      flex-wrap:wrap
  }

  .global-clients .logo-group .logo {
      flex-basis: 50%;
      margin-top: 3em
  }

  .global-clients .logo-group .logo:nth-child(-n+2) {
      margin-top: 0
  }
}

@media (min-width: 768px) {
  .global-clients .logo-group .logo {
      flex-shrink:0;
      margin: calc(var(--font-size-h1)*2/3)
  }
}

.global-product-hero {
  position: relative;
  overflow: hidden;
  height: var(--hero-height)
}

@media not all and (min-width: 768px) {
  .global-product-hero {
      text-align:center
  }
}

.global-product-hero .content {
  height: var(--hero-height);
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  transform: translateY(calc(var(--font-size-h1)*1.75))
}

@media not all and (min-width: 768px) {
  .global-product-hero .content {
      padding-top:4em
  }
}

@media (min-width: 768px) {
  .global-product-hero .content {
      justify-content:center;
      align-items: flex-start;
      transform: translateY(0)
  }
}

.global-product-hero .content .button-group {
  margin-top: 1.5em
}

.global-product-hero .content .button-group .elements-button+.elements-button {
  margin-left: 1.5em
}

.global-product-hero .global-product-hero-image {
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--page-theme-color)
}

.global-product-hero .global-product-hero-image img {
  position: absolute
}

.global-product-hero .global-scroll-tip svg {
  fill: var(--color-primary-black)
}

.global-product-hero.layout-dark .global-scroll-tip svg {
  fill: var(--color-primary-white)
}

.global-hero-video-container,.hero-hack-motion-group {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.global-hero-video-container {
  z-index: -1;
  overflow: hidden;
  background-color: var(--color-primary-black)
}

.global-hero-video-container .global-hero-video-mask {
  position: absolute
}

@media not all and (min-width: 768px) {
  .global-hero-video-container .global-hero-video-mask {
      background:linear-gradient(180deg,rgba(0,0,0,.32),transparent);
      top: 0;
      right: 0;
      bottom: calc(var(--hero-height)/2);
      left: 0
  }
}

@media (min-width: 768px) {
  .global-hero-video-container .global-hero-video-mask {
      background:linear-gradient(90deg,rgba(0,0,0,.32),transparent);
      top: 0;
      right: 50vw;
      bottom: 0;
      left: 0
  }
}

.global-hero-video-container video {
  z-index: 1;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  vertical-align: middle;
  width: 100%
}

.global-hero-video-play-button-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: left
}

@media not all and (min-width: 768px) {
  .global-hero-video-play-button-container {
      top:calc(var(--hero-height)/2);
      right: 0;
      bottom: 0;
      left: 0;
      justify-content: center
  }
}

@media (min-width: 768px) {
  .global-hero-video-play-button-container {
      top:0;
      right: 0;
      bottom: 0;
      left: 50vw
  }
}

.global-hero-video-play-button-icon {
  cursor: pointer;
  transform: translateX(-50%)
}

.global-hero-video-play-button-icon svg {
  width: auto;
  fill: var(--color-gray-white-75)
}

@media not all and (min-width: 768px) {
  .global-hero-video-play-button-icon {
      transform:none
  }
}

.global-info-hero {
  position: relative;
  height: calc(var(--hero-height)/2)
}

@media not all and (min-width: 768px) {
  .global-info-hero {
      text-align:center;
      background-size: cover;
      background-position: center left -5vw
  }
}

@media (min-width: 768px) {
  .global-info-hero {
      background-size:cover;
      background-position: 50%
  }
}

.global-info-hero .layout-max {
  position: relative;
  top: 50%;
  transform: translateY(-50%)
}

.global-info-hero .content {
  height: 100%
}

.global-info-hero .content .elements-button {
  margin-top: 1em
}

.global-info-hero .global-info-hero-image {
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--page-theme-color)
}

.global-info-hero .global-info-hero-image img {
  z-index: 1;
  position: relative;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  vertical-align: middle;
  width: 100%
}

.global-carousel-hero {
  position: relative;
  overflow: hidden;
  height: var(--hero-height);
  background: var(--color-primary-white)
}

.global-carousel-hero .short {
  color: var(--color-gray-gray-800)
}

.global-carousel-hero .carousel-content-layer {
  z-index: 2;
  position: relative;
  height: var(--hero-height);
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  transform: translateY(calc(var(--font-size-h1)*1.75))
}

@media not all and (min-width: 768px) {
  .global-carousel-hero .carousel-content-layer {
      padding-top:4em
  }
}

@media (min-width: 768px) {
  .global-carousel-hero .carousel-content-layer {
      justify-content:center;
      align-items: flex-start;
      transform: translateY(0)
  }

  .global-carousel-hero .carousel-content-layer .elements-product-logo {
      margin-top: calc(var(--font-size-h2)*-1.5)
  }
}

.global-carousel-hero .carousel-content-layer .carousel-content-clients-group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2em;
  margin-bottom: -2em
}

.global-carousel-hero .carousel-content-layer .carousel-content-clients-group .client-logo {
  margin-right: 2em;
  margin-bottom: 2em
}

@media (min-width: 1024px) {
  .global-carousel-hero .carousel-content-layer .carousel-content-clients-group .client-logo {
      flex:none;
      margin-right: 2em;
      margin-bottom: 2em
  }
}

.global-carousel-hero .carousel-content-layer .carousel-content-clients-group .client-logo img {
  height: var(--font-size-h1);
  width: auto;
  filter: grayscale(100%);
  opacity: .8
}

@media not all and (min-width: 420px) {
  .global-carousel-hero .carousel-content-layer .carousel-content-clients-group .client-logo img {
      display:block;
      margin: 0 auto
  }
}

.global-carousel-hero .carousel-content-layer .carousel-content-clients-group .active img {
  filter: none
}

.global-carousel-hero .carousel-content-layer .elements-button {
  align-self: flex-start;
  margin-top: 2em
}

.global-carousel-hero .carousel-indicator-group {
  font-size: var(--font-size-h1);
  z-index: 2;
  margin-top: 1em;
  margin-left: -.1em;
  display: flex
}

@media (min-width: 768px) {
  .global-carousel-hero .carousel-indicator-group {
      position:absolute;
      bottom: 1em
  }
}

.global-carousel-hero .carousel-indicator-group .carousel-indicator-box {
  cursor: pointer;
  padding: .1em
}

.global-carousel-hero .carousel-indicator-group .carousel-indicator-box .carousel-indicator {
  position: relative;
  background: rgba(0,0,0,.2);
  width: .9em;
  height: .1em
}

.global-carousel-hero .carousel-indicator-group .carousel-indicator-box .carousel-indicator .carousel-indicator-progress {
  position: absolute;
  background: var(--color-primary-black);
  height: 100%
}

.global-carousel-hero .carousel-background-mask {
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0
}

@media (min-width: 768px) {
  .global-carousel-hero .carousel-background-mask {
      right:25%;
      background: linear-gradient(90deg,hsla(0,0%,100%,.88),hsla(0,0%,100%,0))
  }
}

@media not all and (min-width: 768px) {
  .global-carousel-hero .carousel-background-mask {
      right:0;
      background: linear-gradient(180deg,#fff,#fff 50%,hsla(0,0%,100%,.8) 75%,hsla(0,0%,100%,0))
  }
}

.global-carousel-hero .carousel-background-layer {
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden
}

@media not all and (min-width: 768px) {
  .global-carousel-hero .carousel-background-layer img {
      position:absolute;
      bottom: 0;
      height: 50%;
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover
  }
}

@media (min-width: 768px) {
  .global-carousel-hero .carousel-background-layer img {
      position:relative;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      -o-object-position: 50% 50%;
      object-position: 50% 50%;
      vertical-align: middle;
      width: 100%
  }
}

.global-feature-picture {
  position: relative
}

.global-feature-picture img {
  position: relative;
  z-index: 1;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  vertical-align: middle;
  width: 100%
}

.global-feature-picture .global-feature-picture-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  left: -2em;
  top: 2em
}

.global-feature-picture .global-feature-picture-decoration.reverse {
  left: 2em
}

@media not all and (min-width: 768px) {
  .global-feature-picture .global-feature-picture-decoration {
      left:-1em;
      top: 1em
  }

  .global-feature-picture .global-feature-picture-decoration.reverse {
      left: 1em
  }
}

.global-feature-picture .global-feature-picture-decoration .bottom,.global-feature-picture .global-feature-picture-decoration .left,.global-feature-picture .global-feature-picture-decoration .right,.global-feature-picture .global-feature-picture-decoration .top {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4AQMAAACSSKldAAAABlBMVEUAAADq6urlXPy5AAAAAXRSTlMAQObYZgAAABJJREFUGNNj+M8ABmTQo2AQAAANawf5UypY4AAAAABJRU5ErkJggg==);
  background-size: 28px;
  position: absolute;
  height: 100%;
  width: 100%
}

.global-feature-picture .global-feature-picture-decoration .top {
  background-position-y: center;
  top: 0;
  width: 4px
}

.global-feature-picture .global-feature-picture-decoration .right {
  background-position-y: center;
  right: 0;
  width: 4px
}

.global-feature-picture .global-feature-picture-decoration .bottom {
  background-position-x: center;
  bottom: 0;
  height: 4px
}

.global-feature-picture .global-feature-picture-decoration .left {
  background-position-x: center;
  left: 0;
  height: 4px
}

.global-feature-picture .global-feature-picture-decoration .bottom-left,.global-feature-picture .global-feature-picture-decoration .bottom-right,.global-feature-picture .global-feature-picture-decoration .top-left,.global-feature-picture .global-feature-picture-decoration .top-right {
  position: absolute;
  background: var(--color-gray-gray-100);
  width: 4px;
  height: 4px
}

.global-feature-picture .global-feature-picture-decoration .top-left {
  top: 0;
  left: 0
}

.global-feature-picture .global-feature-picture-decoration .top-right {
  top: 0;
  right: 0
}

.global-feature-picture .global-feature-picture-decoration .bottom-left {
  bottom: 0;
  left: 0
}

.global-feature-picture .global-feature-picture-decoration .bottom-right {
  bottom: 0;
  right: 0
}

@media not all and (min-width: 768px) {
  .global-feature-picture .global-feature-picture-decoration .bottom,.global-feature-picture .global-feature-picture-decoration .left,.global-feature-picture .global-feature-picture-decoration .right,.global-feature-picture .global-feature-picture-decoration .top {
      background-size:14px
  }

  .global-feature-picture .global-feature-picture-decoration .right,.global-feature-picture .global-feature-picture-decoration .top {
      width: 2px
  }

  .global-feature-picture .global-feature-picture-decoration .bottom,.global-feature-picture .global-feature-picture-decoration .left {
      height: 2px
  }

  .global-feature-picture .global-feature-picture-decoration .bottom-left,.global-feature-picture .global-feature-picture-decoration .bottom-right,.global-feature-picture .global-feature-picture-decoration .top-left,.global-feature-picture .global-feature-picture-decoration .top-right {
      width: 2px;
      height: 2px
  }
}

.global-section-decoration {
  position: absolute;
  z-index: -1;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoAQMAAAC2MCouAAAABlBMVEUAAADq6urlXPy5AAAAAXRSTlMAQObYZgAAABFJREFUCNdj+M8ABESSwwAAAMp6B/kxHIGFAAAAAElFTkSuQmCC);
  background-size: 20px;
  width: 164px;
  height: 224px
}

.global-section-decoration.horizontally {
  width: 224px;
  height: 164px
}

@media not all and (min-width: 768px) {
  .global-section-decoration {
      background-size:10px;
      width: 82px;
      height: 112px
  }

  .global-section-decoration.horizontally {
      width: 112px;
      height: 82px
  }
}

.global-tabs-row {
  display: flex;
  background: var(--color-primary-white)
}

.global-tabs-row .dividing-line {
  width: 1px;
  background: var(--color-gray-gray-100)
}

.global-tabs-row .tab {
  position: relative;
  flex: 1 1;
  cursor: pointer;
  padding: var(--font-size-h1);
  background: var(--color-gray-gray-50);
  transition: background-color .5s ease
}

.global-tabs-row .tab.active {
  background: var(--color-primary-white)
}

.global-tabs-row .tab p+p {
  margin-top: 1em
}

.global-tabs-row .tab .decoration {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--color-primary-black);
  transition: height .3s ease
}

.global-tabs-row .tab .decoration.active {
  height: 8px
}

.global-tabs-row-phone {
  position: relative;
  background: var(--color-primary-white);
  box-shadow: var(--elevation-low)
}

.global-tabs-row-phone .dividing-line {
  width: 1px;
  background: var(--color-gray-gray-100)
}

.global-tabs-row-phone .tab {
  position: relative;
  flex: 100% 1;
  cursor: pointer;
  padding: var(--font-size-h1);
  background: linear-gradient(0deg,#f4f4f4,#f4f4f4),#eff1f4
}

.global-tabs-row-phone .tab.active {
  background: var(--color-primary-white)
}

.global-tabs-row-phone .tab .decoration {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--color-primary-black)
}

.global-tabs-row-phone .switcher {
  z-index: 10;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0
}

.global-tabs-row-phone .switcher .left,.global-tabs-row-phone .switcher .right {
  position: absolute;
  background: var(--color-gray-gray-50);
  border-radius: 100%;
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center
}

.global-tabs-row-phone .switcher .left .icon-arrow,.global-tabs-row-phone .switcher .right .icon-arrow {
  fill: var(--color-gray-black-50)
}

.global-tabs-row-phone .switcher .left {
  left: 0;
  transform: translateX(-50%) translateY(-50%)
}

.global-tabs-row-phone .switcher .right {
  right: 0;
  transform: translateX(50%) translateY(-50%)
}

.global-year-tab-group {
  display: flex;
  margin: 2em 0;
  border-bottom: 1px solid rgba(0,0,0,.1)
}

@media (min-width: 768px) {
  .global-year-tab-group>*+* {
      margin-left:3em
  }
}

@media not all and (min-width: 768px) {
  .global-year-tab-group>*+* {
      margin-left:2em
  }
}

.global-year-tab-group .global-year-tab-item {
  font-weight: var(--bold);
  cursor: pointer;
  padding: .5em 0;
  margin-bottom: -1px;
  color: var(--color-gray-gray-400);
  border-bottom: 2px solid transparent
}

.global-year-tab-group .global-year-tab-item.active {
  color: var(--color-primary-black);
  border-color: var(--color-primary-black)
}

.global-popup {
  box-shadow: var(--elevation-medium);
  background: var(--color-primary-white);
  color: var(--color-primary-black);
  border-radius: 1em;
  padding: 1em
}

.global-qrcode {
  text-align: center
}

.global-qrcode span {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1em;
  font-size: 11px;
  letter-spacing: .25em;
  font-weight: var(--semibold)
}

.global-qrcode span svg {
  height: 1.5em;
  width: auto;
  margin-right: .5em
}

.global-scroll-tip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--font-size-h2)
}

@media not all and (min-width: 768px) {
  .global-scroll-tip {
      display:none
  }
}

.global-scroll-tip svg {
  height: 16px;
  width: auto;
  fill: var(--color-primary-white)
}

.global-feature-block h3 {
  margin-top: .75em
}

.global-full-background-container {
  position: relative;
  --full-background-height: calc(50vw - 48px);
  --full-background-max-height: 656px
}

@media (min-width: 768px) {
  .global-full-background-container {
      height:var(--full-background-height);
      max-height: var(--full-background-max-height)
  }
}

.global-full-background-container .full-background-layer {
  z-index: -1;
  background-color: var(--page-theme-color);
  height: calc(100vw - 24px)
}

@media (min-width: 768px) {
  .global-full-background-container .full-background-layer {
      margin-bottom:0;
      height: var(--full-background-height);
      max-height: var(--full-background-max-height);
      position: absolute;
      top: 0;
      left: 0;
      right: 0
  }
}

.global-full-background-container .full-background-layer img,.global-full-background-container .full-background-layer video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  vertical-align: middle;
  width: 100%
}

.global-full-background-container .full-background-layer img.hidden,.global-full-background-container .full-background-layer video.hidden {
  opacity: 0
}

.global-full-background-container .full-background-layer img.visible,.global-full-background-container .full-background-layer video.visible {
  opacity: 1
}

.global-modal {
  z-index: 10000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: scroll;
  -webkit-overflow-scrolling: touch
}

.global-modal .modal-normal {
  margin: 3em 0;
  background: var(--color-primary-white)
}

.global-modal.global-modal-video {
  padding: 0 calc(var(--edge)*1);
  display: flex;
  align-items: center;
  justify-content: center
}

.global-modal.global-modal-video .video-container {
  position: relative
}

.global-modal.global-modal-video .video-container video {
  max-height: calc(100vh - 4em);
  width: auto
}

.global-modal.global-modal-video .video-container .icon-container {
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%,-50%);
  height: 2em;
  width: 2em;
  background: var(--color-primary-white);
  border-radius: 100px;
  box-shadow: var(--elevation-low);
  display: flex;
  align-items: center;
  justify-content: center
}

.global-modal.global-modal-video .mask {
  background: var(--color-primary-black)
}

.global-modal .mask {
  z-index: -1;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.25)
}

.global-reserve {
  min-height: 100px;
  padding: var(--edge)
}

@media (min-width: 768px) {
  .global-reserve {
      padding:3em
  }
}

.global-reserve .message {
  text-align: center;
  padding: 5em 3em 8em
}

@media (min-width: 768px) {
  .global-reserve .message {
      padding:8em 8em 11em
  }
}

.global-reserve .message .description {
  margin-top: 1em
}

.global-reserve>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5em
}

.global-reserve>header .close {
  cursor: pointer
}

.global-reserve>header .close .icon-close {
  font-size: var(--font-size-h3);
  height: 1em;
  width: auto
}

.global-reserve .tips {
  color: var(--color-gray-black-50);
  margin-bottom: 2em
}

.global-reserve .radio-group {
  margin: 2em 0
}

.global-reserve .input-label-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5em;
  font-size: var(--font-size-description);
  color: var(--color-gray-black-50)
}

.global-reserve .input-label-group .alert {
  color: var(--color-secondary-red)
}

.global-reserve .input-label-group.product-label-group {
  margin-bottom: 1em
}

.global-reserve .interests {
  margin-right: -1em;
  margin-bottom: -1em
}

@media (min-width: 768px) {
  .global-reserve .interests {
      display:flex;
      flex-wrap: wrap
  }

  .global-reserve .interests>* {
      flex: calc(33.33333% - 1em) 1
  }
}

.global-reserve .interests .checkbox-group {
  margin-right: 1em;
  margin-bottom: 1em;
  display: flex;
  align-items: center
}

.global-reserve .interests .checkbox-group input {
  position: relative;
  top: -.05em
}

.global-reserve .interests .checkbox-group label {
  padding-left: .5em
}

.global-reserve .user-info {
  margin-top: 2em;
  margin-right: -1em;
  margin-bottom: -1em;
  font-family: var(--form-font-family)
}

@media (min-width: 768px) {
  .global-reserve .user-info {
      display:flex;
      flex-wrap: wrap
  }

  .global-reserve .user-info>* {
      width: calc(50% - 1em)
  }
}

.global-reserve .user-info .input-group {
  margin-right: 1em;
  margin-bottom: 1em
}

.global-reserve .user-info .input-group.full-width {
  flex: 100% 1
}

.global-reserve .user-info .input-group input[type=text],.global-reserve .user-info .input-group select,.global-reserve .user-info .input-group textarea {
  display: block;
  width: 100%
}

.global-reserve .user-info .input-group textarea {
  resize: vertical
}

.global-reserve .user-info .input-group .region {
  display: flex
}

.global-reserve .user-info .input-group .region select+select {
  margin-left: 1em
}

.global-reserve .user-info .input-group .ratio-group {
  display: flex;
  align-items: center;
  height: 3.5em
}

.global-reserve .user-info .input-group .ratio-group input {
  position: relative;
  top: -.1em
}

.global-reserve .user-info .input-group .ratio-group label {
  padding-left: .5em;
  margin-right: 2em
}

.global-reserve .elements-button {
  margin-top: 2em;
  margin-bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center
}

.global-loading-placeholder {
  color: var(--color-gray-gray-400)
}

.layout-dark {
  color: var(--color-primary-white)
}

.layout-dark .description,.layout-dark .short,.layout-dark ul li {
  color: var(--color-gray-white-50)
}

.layout-dark .global-loading-placeholder {
  color: var(--color-gray-gray-600)
}

.layout-dark .g7-logo {
  fill: var(--color-primary-white)
}

.layout-dark .elements-button.ghost {
  color: var(--color-primary-white);
  border-color: var(--color-primary-white)
}

.layout-dark .global-feature-picture-decoration {
  opacity: .25
}

.layout-max {
  max-width: 1440px;
  padding: 0 var(--edge)
}

.layout-max,.layout-modal-max {
  margin: 0 auto
}

.layout-max-video {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 var(--edge)
}

.hack-font-indivisible-into-LTH {
  font-family: var(--font-family);
  font-weight: var(--bold)
}

@media (min-width: 768px) {
  .hack-middle {
      height:100%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: flex-start
  }
}

@media (min-width: 576px) {
  .hack-nowrap {
      white-space:nowrap
  }
}

.hack-break-text-md .comma {
  display: inline
}

@media (min-width: 768px) and (max-width:1200px) {
  .hack-break-text-md .comma {
      display:none
  }
}

@media not all and (min-width: 420px) {
  .hack-break-text-md .comma {
      display:none
  }
}

.hack-break-text-md br {
  display: none
}

@media (min-width: 768px) and (max-width:1200px) {
  .hack-break-text-md br {
      display:inline
  }
}

@media not all and (min-width: 420px) {
  .hack-break-text-md br {
      display:inline
  }
}

@media (min-width: 768px) and (max-width:1400px) {
  .global-footer-cta .hack-break-text-md br {
      display:none
  }
}

@media not all and (min-width: 420px) {
  .hack-hidden-before-xxs {
      display:none
  }
}

@media not all and (min-width: 576px) {
  .hack-hidden-before-xs {
      display:none
  }
}

@media not all and (min-width: 768px) {
  .hack-hidden-before-sm {
      display:none
  }
}

@media not all and (min-width: 1024px) {
  .hack-hidden-before-md {
      display:none
  }
}

@media not all and (min-width: 1200px) {
  .hack-hidden-before-lg {
      display:none
  }
}

@media (min-width: 420px) {
  .hack-hidden-after-xxs {
      display:none
  }
}

@media (min-width: 576px) {
  .hack-hidden-after-xs {
      display:none
  }
}

@media (min-width: 768px) {
  .hack-hidden-after-sm {
      display:none
  }
}

@media (min-width: 1024px) {
  .hack-hidden-after-md {
      display:none
  }
}

@media (min-width: 1200px) {
  .hack-hidden-after-lg {
      display:none
  }
}

.icon-arrow {
  height: 1em;
  width: auto
}

.page-home {
  --page-theme-color: var(--color-primary-white)
}

.home-hero {
  position: relative;
  min-height: var(--hero-height);
  color: var(--color-primary-white);
  display: flex;
  align-items: center;
  justify-content: center
}

.home-hero,.home-hero .global-scroll-tip {
  text-align: center
}

.home-reel .fixed-screen {
  z-index: 1;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh
}

.home-reel .fixed-screen .link-list {
  z-index: 1;
  color: var(--color-gray-black-50)
}

.home-reel .fixed-screen .link-list .link {
  cursor: pointer
}

@media not all and (min-width: 768px) {
  .home-reel .fixed-screen .link-list {
      position:absolute;
      top: 5em;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start
  }

  .home-reel .fixed-screen .link-list .link {
      font-size: var(--font-size-description);
      font-weight: 400;
      margin: 0 .25em;
      padding: 0 .75em;
      line-height: 2em
  }

  .home-reel .fixed-screen .link-list .link.active {
      border-radius: 100px;
      background: var(--color-gray-gray-50)
  }
}

@media (min-width: 768px) {
  .home-reel .fixed-screen .link-list {
      position:absolute;
      top: 50%;
      transform: translateY(-50%)
  }
}

@media (min-width: 768px) and (min-width:768px) {
  .home-reel .fixed-screen .link-list .link {
      margin:1em 0
  }
}

.home-reel .fixed-screen .text-section-container {
  z-index: 100;
  width: 100%;
  height: 100vh
}

.home-reel .fixed-screen .text-section-container .hack-position {
  z-index: 100;
  position: relative;
  top: 50%
}

@media not all and (min-width: 768px) {
  .home-reel .fixed-screen .text-section-container .hack-position {
      padding-top:var(--edge)
  }
}

.home-reel .fixed-screen .text-section-container .text-section {
  width: 100%;
  z-index: 10;
  position: absolute
}

@media (min-width: 768px) {
  .home-reel .fixed-screen .text-section-container .text-section {
      transform:translateY(-50%)
  }
}

.home-reel .fixed-screen .text-section-container .text-section .products {
  margin-top: calc(var(--font-size-h1)*0.5);
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: -1.5em
}

.home-reel .fixed-screen .text-section-container .text-section .products>* {
  margin-right: 1.5em;
  margin-bottom: 1em
}

.home-reel .fixed-screen .layout-max {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden
}

.home-reel .fixed-screen .video-container {
  position: absolute;
  width: 100%;
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none
}

@media not all and (min-width: 768px) {
  .home-reel .fixed-screen .video-container {
      top:4em;
      left: 50%;
      transform: translateX(-50%);
      max-width: 420px
  }
}

@media (min-width: 768px) {
  .home-reel .fixed-screen .video-container {
      right:0;
      top: 50%;
      transform: translateY(-50%);
      width: 50%
  }
}

.home-reel .fixed-screen .video-container:before {
  content: "";
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0) 5%,hsla(0,0%,100%,0) 95%,#fff)
}

.home-reel .placeholder {
  height: 100vh
}

@media not all and (min-width: 768px) {
  .home-reel .placeholder#placeholder-0 {
      margin-top:-50vh
  }
}

@media (min-width: 768px) {
  .home-reel .placeholder#placeholder-0 {
      margin-top:-100vh
  }
}

.home-g7-bigdata {
  overflow: hidden;
  padding: var(--row-gap) 0;
  margin-top: calc(var(--row-gap)*-1)
}

@media not all and (min-width: 768px) {
  .home-g7-bigdata {
      margin-top:calc(var(--row-gap)*-1.5)
  }
}

.home-g7-bigdata .elements-product-logo,.home-g7-bigdata h2 {
  display: inline-block;
  margin-bottom: 1em
}

.home-g7-bigdata .elements-product-logo .icon-arrow,.home-g7-bigdata h2 .icon-arrow {
  fill: #000;
  margin-left: .5em;
  margin-top: -.2em;
  font-size: .75em
}

.home-g7-bigdata .layout-max {
  position: relative
}

.home-g7-bigdata .image-container {
  z-index: 1;
  position: absolute;
  top: calc(var(--font-size-h1)*2.75);
  right: 0;
  pointer-events: none
}

@media not all and (min-width: 420px) {
  .home-g7-bigdata .image-container {
      width:75%
  }

  .home-g7-bigdata .image-container img {
      transform: translate(30%,-40%)
  }
}

@media (min-width: 420px) {
  .home-g7-bigdata .image-container {
      width:70%
  }

  .home-g7-bigdata .image-container img {
      transform: translate(20%,-50%)
  }
}

@media (min-width: 1024px) {
  .home-g7-bigdata .image-container {
      width:65%
  }

  .home-g7-bigdata .image-container img {
      transform: translate(12.5%,-50%)
  }
}

.home-g7-bigdata .panel {
  position: relative;
  background: var(--color-gray-gray-50)
}

@media not all and (min-width: 768px) {
  .home-g7-bigdata .panel {
      padding:calc(var(--font-size-h1)*1.5) 0
  }
}

@media (min-width: 768px) {
  .home-g7-bigdata .panel {
      padding:calc(var(--font-size-h1)*2) 0
  }
}

.home-g7-bigdata .panel .num-group {
  z-index: 1
}

.home-g7-bigdata .panel .num-group:not(:nth-child(-n+1)) {
  margin-top: 2em
}

@media (min-width: 1024px) {
  .home-g7-bigdata .panel .num-group:not(:nth-child(-n+1)) {
      margin-top:0
  }

  .home-g7-bigdata .panel .num-group:nth-child(-n+1) {
      margin-bottom: calc(var(--font-size-h1)*1.5)
  }
}

.home-g7-bigdata .panel .num-group .num {
  white-space: nowrap;
  font-weight: var(--semibold);
  font-size: var(--font-size-h2)
}

.home-g7-bigdata .panel .num-group .num .unit {
  font-weight: 400;
  position: relative;
  left: .5em
}

@media (min-width: 1200px) {
  .home-g7-bigdata .panel .num-group .num {
      font-size:var(--font-size-h1)
  }

  .home-g7-bigdata .panel .num-group .num .unit {
      left: .5em;
      top: -1.35em
  }
}

.home-g7-bigdata .panel .num-group .num~.description {
  margin-top: .75em
}

@media (min-width: 1200px) {
  .home-g7-bigdata .panel .num-group .num~.description {
      margin-top:1.15em
  }
}

@media not all and (min-width: 1200px) {
  .home-g7-bigdata .panel .updated {
      margin-top:calc(var(--font-size-h1)*1);
      margin-bottom: -1em
  }
}

@media (min-width: 1200px) {
  .home-g7-bigdata .panel .updated {
      position:absolute;
      right: calc(var(--font-size-h1)*1.5);
      bottom: calc(var(--font-size-h1)*1.5)
  }
}

.home-stories-news {
  position: relative;
  overflow: hidden
}

.home-stories-news .stories-container {
  position: relative;
  margin-bottom: var(--row-gap)
}

.home-stories-news .stories-container .photo {
  position: relative;
  margin-left: auto
}

@media not all and (min-width: 1024px) {
  .home-stories-news .stories-container .photo {
      width:60%
  }
}

@media not all and (min-width: 420px) {
  .home-stories-news .stories-container .photo {
      width:100%
  }
}

@media (min-width: 1024px) {
  .home-stories-news .stories-container .photo {
      width:auto
  }
}

.home-stories-news .stories-container .photo .placeholder {
  background: var(--page-theme-color)
}

.home-stories-news .stories-container .photo .placeholder img {
  opacity: 0
}

.home-stories-news .stories-container .photo img.picture {
  position: absolute;
  top: 0;
  z-index: 1;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  vertical-align: middle;
  width: 100%
}

.home-stories-news .stories-container .photo .pattern {
  z-index: -1;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: auto;
  transform: translateX(-45%) translateY(45%)
}

.home-stories-news .stories-container .content-container {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding-top: 2.5em
}

@media (min-width: 1024px) {
  .home-stories-news .stories-container .content-container {
      padding-top:0
  }
}

.home-stories-news .stories-container .content-container .action {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center
}

.home-stories-news .stories-container .content-container .action .left,.home-stories-news .stories-container .content-container .action .right {
  cursor: pointer
}

.home-stories-news .stories-container .content-container .action .left.disabled svg,.home-stories-news .stories-container .content-container .action .right.disabled svg {
  fill: var(--color-gray-gray-300)
}

.home-stories-news .stories-container .content-container .action .right {
  margin-left: 1.5em
}

.home-stories-news .stories-container .content-container .action svg {
  height: 1em;
  width: auto;
  fill: var(--color-primary-black)
}

.home-stories-news .stories-container .content-container .content {
  margin-top: var(--row-gap)
}

@media not all and (min-width: 1024px) {
  .home-stories-news .stories-container .content-container .content {
      margin-top:calc(var(--row-gap)/1.5)
  }
}

.home-stories-news .stories-container .content-container .icon {
  z-index: -1;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 8em;
  height: 8em;
  transform: translateX(-50%)
}

@media not all and (min-width: 1024px) {
  .home-stories-news .stories-container .content-container .icon {
      display:none
  }
}

.home-stories-news .stories-container .content-container .stories-group .label {
  color: var(--color-secondary-beige);
  margin-bottom: .5em
}

.home-stories-news .stories-container .content-container .stories-group .storie {
  text-align: justify;
  line-height: 180%;
  font-size: var(--font-size-h3)
}

@media (min-width: 768px) {
  .home-stories-news .stories-container .content-container .stories-group .storie {
      font-size:calc(var(--font-size-h2)*0.75)
  }
}

.home-stories-news .stories-container .content-container .stories-group .storie b {
  font-weight: var(--semibold);
  border-bottom: 3px solid var(--color-secondary-beige)
}

.home-stories-news .stories-container .content-container .home-stories-clients-group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2em;
  margin-bottom: -2rem
}

.home-stories-news .stories-container .content-container .home-stories-clients-group .client-logo {
  cursor: pointer;
  flex: 0 0 33%;
  margin-right: 0;
  margin-bottom: 2rem
}

@media (min-width: 1024px) {
  .home-stories-news .stories-container .content-container .home-stories-clients-group .client-logo {
      flex:none;
      margin-right: 2rem;
      margin-bottom: 2rem
  }
}

.home-stories-news .stories-container .content-container .home-stories-clients-group .client-logo img {
  height: var(--font-size-h1);
  width: auto;
  filter: grayscale(100%)
}

@media not all and (min-width: 420px) {
  .home-stories-news .stories-container .content-container .home-stories-clients-group .client-logo img {
      display:block;
      margin: 0 auto
  }
}

.home-stories-news .stories-container .content-container .home-stories-clients-group .active img {
  filter: none
}

.home-stories-news .stories-container .white-background {
  z-index: -2;
  position: absolute;
  top: var(--row-gap);
  width: 500%;
  height: 100%;
  background: var(--color-primary-white)
}

.home-stories-news .gray-background {
  z-index: -10;
  position: absolute;
  background: var(--color-gray-gray-50);
  top: var(--row-gap);
  width: 100%;
  height: 100%
}

.news-container {
  margin: 0 -16px;
  padding: var(--row-gap) 0;
  display: flex
}

@media not all and (min-width: 1024px) {
  .news-container {
      flex-wrap:wrap;
      flex-flow: column
  }
}

.news-container .news-heading {
  z-index: 1;
  margin: 55px auto;
  display: flex;
  flex-flow: column;
  align-items: center;
  flex-shrink: 0;
  width: calc(16.66667vw - 16px)
}
.news-container .news-heading span{
  font-size: 36px;
  font-family: MicrosoftYaHeiLight;
  line-height: 5px;
  color: #000000;
}

@media (min-width: 1440px) {
  .news-container .news-heading {
      width:224px
  }
}

.news-container .news-heading svg {
  fill: var(--color-gray-gray-400);
  margin-top: .25em
}

@media not all and (min-width: 1024px) {
  .news-container .news-heading {
      padding:0 16px 24px;
      width: 100%;
      flex-flow: row
  }

  .news-container .news-heading span {
      width: auto
  }

  .news-container .news-heading svg {
      margin-top: 0;
      margin-left: .25em
  }
}

.news-container .news-list {
  position: relative;
  flex-shrink: 0;
  margin-left: -8px;
  width: calc(83.33333vw - 24px);
  margin-top: 93px;
}

@media not all and (min-width: 1024px) {
  .news-container .news-list {
      width:calc(100% + 16px)
  }
}

@media (min-width: 1440px) {
  .news-container .news-list {
      width:calc(672px + 50vw)
  }
}

.news-container .news-list .news-scroll-area {
  width: 100%;
  display: flex
}

.news-container .news-list .news-item-container {
  height: 100%;
  padding: 0 16px;
  flex-shrink: 0;
  width: calc(25vw - 24px);
  min-width: 15em
}

@media (min-width: 1440px) {
  .news-container .news-list .news-item-container {
      width:336px
  }
}

.news-container .news-list .left,.news-container .news-list .right {
  z-index: 10;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: 4em;
  height: 4em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background: var(--color-gray-gray-50)
}

@media not all and (min-width: 768px) {
  .news-container .news-list .left,.news-container .news-list .right {
      display:none
  }
}

.news-container .news-list .left svg,.news-container .news-list .right svg {
  fill: var(--color-gray-black-50);
  height: 1.25em;
  width: auto
}

.news-container .news-list .left {
  transform: translateX(-50%) translateY(-50%);
  left: calc(52px + 2vw)
}

.news-container .news-list .right {
  transform: translateY(-50%);
  right: 2vw
}

.news-card {
  transition: box-shadow .3s ease
}

.news-card:hover {
  box-shadow: var(--elevation-high)
}

.news-card .news-card-image {
  background: var(--color-blue-gray-100);
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden
}

.news-card .news-card-image img {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  vertical-align: middle
}

.news-card .news-card-content {
  background: var(--color-primary-white);
  padding: 1.5em 2em 6em;
  width: 100%;
  height: calc(25vw - 24px);
  min-height: 15em
}

@media (min-width: 1440px) {
  .news-card .news-card-content {
      width:304px;
      height: 304px
  }
}

.news-card .news-card-content .date {
  font-weight: 400;
  color: var(--color-gray-black-50);
  margin-bottom: 1em
}

.news-card .news-card-content .title {
  font-size: var(--font-size-h3);
  line-height: 180%
}

.page-smart-freight {
  --page-theme-color: var(--color-beige-gray-100)
}

.page-smart-freight .elements-button.ghost {
  background: var(--color-beige-gray-100)
}

@media not all and (min-width: 768px) {
  .page-smart-freight .global-product-hero-image img {
      width:135%;
      max-width: 600px;
      bottom: -10vh;
      left: 50%;
      transform: translateX(-50%)
  }
}

@media (min-width: 768px) {
  .page-smart-freight .global-product-hero-image img {
      width:70vw;
      right: -7.5vw;
      top: 50%;
      transform: translateY(-50%)
  }
}

.smart-freight-intro {
  margin: var(--row-gap) 0
}

.intro-video {
  position: relative;
  margin: calc(var(--row-gap)/3*2) 0;
  padding: calc(var(--row-gap)/3*2) 0;
  text-align: center
}

.intro-video h2 {
  margin-bottom: 1.5em
}

.intro-video .video-poster {
  cursor: pointer;
  position: relative
}

.intro-video .video-poster .video-indicator {
  position: absolute;
  right: 0;
  bottom: 0;
  height: calc(var(--font-size-h1)*2);
  width: auto;
  opacity: 1;
  transition: opacity .3s ease
}

.intro-video .video-poster .global-hero-video-play-button-icon {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  transition: opacity .3s ease
}

.intro-video .video-poster:hover .global-hero-video-play-button-icon,.intro-video .video-poster:hover .video-indicator {
  opacity: .8
}

.intro-video .half-background {
  z-index: -1;
  background-color: var(--page-theme-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

@media (min-width: 768px) {
  .intro-video .half-background {
      left:50vw
  }
}

.smart-freight-feature-1 {
  margin: var(--row-gap) 0
}

@media (min-width: 768px) {
  .smart-freight-feature-1 .row.float {
      position:relative;
      top: calc(var(--font-size-h1)*-2)
  }
}

.smart-freight-feature-1 .text-container {
  background: var(--color-primary-white)
}

@media not all and (min-width: 768px) {
  .smart-freight-feature-1 .text-container {
      text-align:center;
      margin-top: calc(var(--row-gap)/2)
  }
}

@media (min-width: 768px) {
  .smart-freight-feature-1 .text-container {
      padding-top:var(--font-size-h1);
      padding-right: var(--font-size-h1)
  }
}

.smart-freight-feature-1 .text-container .list {
  display: flex;
  flex-flow: column;
  justify-content: center
}

.smart-freight-feature-1 .text-container .list>*+* {
  margin-top: var(--font-size-h1);
  margin-left: 0
}

@media (min-width: 768px) {
  .smart-freight-feature-1 .text-container .list {
      flex-flow:row;
      justify-content: flex-start
  }

  .smart-freight-feature-1 .text-container .list>*+* {
      margin-top: 0;
      margin-left: var(--font-size-h1)
  }
}

.smart-freight-feature-2 {
  margin: var(--row-gap) 0;
  text-align: center
}

@media (min-width: 768px) {
  .smart-freight-feature-2 {
      text-align:left
  }
}

.smart-freight-feature-2 .col+.col {
  margin-top: calc(var(--row-gap)/2)
}

.smart-freight-feature-3 {
  position: relative;
  margin: var(--row-gap) 0
}

@media not all and (min-width: 768px) {
  .smart-freight-feature-3 .text-container {
      margin-top:calc(var(--row-gap)/2);
      text-align: center
  }
}

@media (min-width: 768px) {
  .smart-freight-feature-3 .row {
      position:relative;
      top: 50%;
      transform: translateY(-50%)
  }
}

.smart-freight-feature-3 .global-full-background-container .full-background-layer {
  background: none
}

@media not all and (min-width: 768px) {
  .smart-freight-feature-3 .global-full-background-container .full-background-layer {
      position:relative
  }

  .smart-freight-feature-3 .global-full-background-container .full-background-layer video {
      -o-object-position: right 50%;
      object-position: right 50%
  }
}

@media (min-width: 768px) {
  .smart-freight-feature-3 .global-full-background-container .full-background-layer video {
      margin-top:-2em;
      height: auto
  }
}

.page-g7-card {
  --page-theme-color: var(--color-beige-gray-100)
}

@media (min-width: 768px) {
  .page-g7-card .global-product-hero-image img {
      width:60vw;
      right: 4vw;
      top: 10%
  }
}

@media (min-height: 80vw) {
  .page-g7-card .global-product-hero-image img {
      top:50%;
      transform: translateY(-50%)
  }
}

@media not all and (min-width: 768px) {
  .page-g7-card .global-product-hero-image img {
      width:100vw;
      max-width: 420px;
      top: unset;
      bottom: -12vh;
      left: 50%;
      transform: translateX(-50%)
  }
}

.g7-card-intro {
  position: relative;
  padding: calc(var(--row-gap)*1.5) 0;
  text-align: center
}

.g7-card-feature-1 {
  margin: var(--row-gap) 0;
  text-align: center
}

.g7-card-feature-1 .map-container {
  position: relative
}

@media not all and (min-width: 768px) {
  .g7-card-feature-1 .map-container {
      margin-bottom:calc(var(--row-gap)/2)
  }
}

.g7-card-feature-1 .map-container .map {
  z-index: 1;
  padding-bottom: 100%
}

.g7-card-feature-1 .map-container .map img {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0
}

.g7-card-feature-1 .map-container .map img.map-layer {
  z-index: 0
}

.g7-card-feature-1 .map-container .controllers {
  display: flex;
  justify-content: center;
  font-size: var(--font-size-label);
  margin-top: 1.5em
}

.g7-card-feature-1 .map-container .controllers .control-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  opacity: .5;
  border: 2px solid var(--color-primary-black);
  padding: .5em 1em
}

.g7-card-feature-1 .map-container .controllers .control-button+.control-button {
  margin-left: .5em
}

@media (min-width: 768px) {
  .g7-card-feature-1 .map-container .controllers .control-button {
      padding:.75em 1em
  }

  .g7-card-feature-1 .map-container .controllers .control-button+.control-button {
      margin-left: 1em
  }
}

@media (min-width: 1024px) {
  .g7-card-feature-1 .map-container .controllers .control-button {
      padding:.75em 1.25em
  }

  .g7-card-feature-1 .map-container .controllers .control-button+.control-button {
      margin-left: 1.25em
  }
}

.g7-card-feature-1 .map-container .controllers .control-button svg {
  fill: var(--color-primary-black);
  margin-right: .5em
}

.g7-card-feature-1 .map-container .controllers .control-button.active {
  opacity: 1;
  background: var(--color-primary-black);
  border: 2px solid transparent;
  color: var(--color-primary-white)
}

.g7-card-feature-1 .map-container .controllers .control-button.active svg {
  fill: var(--color-primary-white)
}

@media (min-width: 768px) {
  .g7-card-feature-1 {
      text-align:left
  }
}

.g7-card-feature-2 {
  background: var(--color-primary-black);
  margin: var(--row-gap) 0;
  padding: var(--row-gap) 0;
  text-align: center
}

@media (min-width: 768px) {
  .g7-card-feature-2 {
      text-align:left
  }
}

.g7-card-feature-2 ul {
  color: var(--color-gray-white-50)
}

@media (min-width: 768px) {
  .g7-card-feature-2 .picture {
      width:100%;
      height: 100%;
      position: relative
  }

  .g7-card-feature-2 .picture img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%)
  }
}

.g7-card-feature-3 {
  margin: var(--row-gap) 0;
  text-align: center
}

@media not all and (min-width: 768px) {
  .g7-card-feature-3 .col+.col {
      margin-top:calc(var(--row-gap)/2)
  }
}

@media (min-width: 768px) {
  .g7-card-feature-3 {
      text-align:left
  }
}

.g7-card-feature-4 {
  position: relative;
  margin: var(--row-gap) 0
}

@media not all and (min-width: 768px) {
  .g7-card-feature-4 {
      text-align:center
  }
}

.g7-card-feature-4 .full-background-layer {
  background: #edeada
}

@media not all and (min-width: 768px) {
  .g7-card-feature-4 .full-background-layer {
      margin-bottom:calc(var(--row-gap)/2);
      position: relative
  }

  .g7-card-feature-4 .full-background-layer img {
      height: 80%;
      transform: translateY(10%);
      overflow: visible;
      -o-object-position: -20vw bottom;
      object-position: -20vw bottom
  }
}

@media (min-width: 768px) {
  .g7-card-feature-4 .full-background-layer {
      overflow:hidden
  }

  .g7-card-feature-4 .full-background-layer img {
      -o-object-position: right bottom;
      object-position: right bottom;
      transform: translateX(25%)
  }
}

@media (min-width: 768px) {
  .g7-card-feature-4 .row {
      position:relative;
      top: 50%;
      transform: translateY(-50%)
  }
}

.g7-card-feature-4 a {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 2px solid #000
}

.g7-card-feature-5 {
  margin: var(--row-gap) 0
}

@media not all and (min-width: 768px) {
  .g7-card-feature-5 .text-container {
      text-align:center;
      margin-top: calc(var(--row-gap)/2)
  }

  .g7-card-feature-5 .layout-max {
      display: flex;
      flex-direction: column-reverse
  }

  .g7-card-feature-5 .layout-max .text-container {
      padding: 0
  }
}

@media (min-width: 768px) {
  .g7-card-feature-5 .row.float {
      z-index:1;
      position: relative;
      top: calc(var(--font-size-h1)*2)
  }
}

.g7-card-feature-5 .text-container {
  background: var(--color-primary-white);
  padding-left: var(--font-size-h1);
  padding-bottom: var(--font-size-h1)
}

.g7-card-feature-5 .full-background-layer {
  background: var(--color-primary-black)
}

.page-trucker-assistant {
  --page-theme-color: var(--color-beige-gray-100)
}

@media not all and (min-width: 768px) {
  .page-trucker-assistant .global-product-hero-image img {
      width:165%;
      max-width: 700px;
      bottom: -20vh;
      left: 50%;
      transform: translateX(-50%)
  }
}

@media (min-width: 768px) {
  .page-trucker-assistant .global-product-hero-image img {
      right:-20vw;
      top: 50%;
      transform: translateY(-50%)
  }
}

.trucker-assistant-intro {
  position: relative;
  padding: calc(var(--row-gap)*1.5) 0;
  text-align: center
}

.trucker-assistant-feature-1 {
  position: relative;
  margin: var(--row-gap) 0
}

@media not all and (min-width: 768px) {
  .trucker-assistant-feature-1 {
      text-align:center
  }

  .trucker-assistant-feature-1 .col+.col {
      margin-top: calc(var(--row-gap)/2)
  }
}

.trucker-assistant-feature-1 .photo-container {
  padding-top: var(--font-size-h1)
}

@media not all and (min-width: 768px) {
  .trucker-assistant-feature-1 .photo-container {
      position:relative
  }
}

.trucker-assistant-feature-1 .photo-container img {
  position: relative;
  right: 1em
}

@media (min-width: 768px) {
  .trucker-assistant-feature-1 .photo-container img {
      right:-2em
  }
}

.trucker-assistant-feature-1 .photo-container .half-background {
  z-index: -1;
  background-color: var(--page-theme-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

@media (min-width: 768px) {
  .trucker-assistant-feature-1 .photo-container .half-background {
      right:50vw
  }
}

.trucker-assistant-feature-1 .download-container {
  position: relative;
  width: 100%;
  margin-top: var(--font-size-h1)
}

.trucker-assistant-feature-1 .download-container .global-popup {
  position: absolute;
  bottom: calc(100% + 1.5em);
  left: 50%;
  transform: translateX(-50%)
}

.trucker-assistant-feature-1 .download-container .elements-button {
  padding: 1em 1.5em;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.trucker-assistant-feature-1 .download-container .elements-button .icon-arrow-long {
  width: auto;
  height: calc(var(--font-size-h2));
  transform: rotate(90deg)
}

.trucker-assistant-feature-1 .download-container .elements-button .icon-arrow-long circle {
  fill: var(--color-primary-white)
}

.trucker-assistant-feature-1 .download-container .elements-button .icon-arrow-long path {
  fill: var(--color-primary-black)
}

.global-picture-widget {
  z-index: 2;
  position: absolute;
  top: -3.5em;
  right: -3.5em;
  width: 58%;
  padding: 1.5em 2em;
  background: var(--color-primary-white);
  box-shadow: var(--elevation-medium);
  border-radius: 1em
}

.trucker-assistant-feature-2 {
  margin: var(--row-gap) 0
}

.trucker-assistant-feature-2 .global-feature-picture img.person {
  pointer-events: none;
  z-index: 3;
  position: absolute;
  bottom: 0;
  left: 0
}

@media not all and (min-width: 768px) {
  .trucker-assistant-feature-2 .global-feature-picture .global-picture-widget {
      display:none
  }
}

.trucker-assistant-feature-2 .global-feature-picture .global-picture-widget .head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between
}

.trucker-assistant-feature-2 .global-feature-picture .global-picture-widget .head img {
  border-radius: 100px;
  max-width: 64px;
  min-height: 64px
}

.trucker-assistant-feature-2 .global-feature-picture .global-picture-widget ul {
  margin: 1em 0;
  border-bottom: 1px solid var(--color-secondary-gray)
}

.trucker-assistant-feature-2 .global-feature-picture .global-picture-widget ul li {
  margin-left: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4em 0;
  border-top: 1px solid var(--color-secondary-gray)
}

.trucker-assistant-feature-2 .global-feature-picture .global-picture-widget ul li .name {
  font-size: var(--font-size-description);
  font-weight: 400
}

.trucker-assistant-feature-2 .global-feature-picture .global-picture-widget ul li .price {
  color: var(--color-primary-black);
  font-weight: var(--semibold)
}

.trucker-assistant-feature-2 .global-feature-picture .global-picture-widget ul li+li {
  margin-top: 0
}

.trucker-assistant-feature-2 .global-feature-picture .global-picture-widget .total {
  text-align: right
}

.trucker-assistant-feature-2 .global-feature-picture .global-picture-widget .total .discount {
  font-size: var(--font-size-description);
  color: var(--color-secondary-red);
  margin-bottom: .5em
}

@media not all and (min-width: 768px) {
  .trucker-assistant-feature-2 {
      text-align:center
  }

  .trucker-assistant-feature-2 .row {
      flex-direction: column-reverse
  }

  .trucker-assistant-feature-2 .global-feature-picture {
      margin-bottom: calc(var(--row-gap)/2)
  }
}

.trucker-assistant-feature-3 {
  margin: var(--row-gap) 0
}

.trucker-assistant-feature-3 .full-background-layer {
  background-image: url(/static/trucker-assistant-feature-3-d818ac753da99f70acea559e717e685a.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%
}

@media not all and (min-width: 768px) {
  .trucker-assistant-feature-3 .full-background-layer {
      background-position:left 26% center
  }
}

.trucker-assistant-feature-3 .find-button {
  position: absolute;
  background: var(--color-primary-white);
  right: 1em;
  bottom: 1em;
  display: inline-flex;
  align-items: center;
  padding: 1em 2em
}

.trucker-assistant-feature-3 .icon-widget {
  position: absolute;
  left: 1em;
  bottom: 1em;
  background: var(--color-primary-white);
  padding: 1em
}

@media not all and (min-width: 768px) {
  .trucker-assistant-feature-3 .icon-widget {
      display:none
  }
}

.trucker-assistant-feature-3 .icon-widget li {
  font-size: var(--font-size-description);
  font-weight: var(--semibold);
  display: flex;
  align-items: center
}

.trucker-assistant-feature-3 .icon-widget li span {
  margin-left: .75em
}

.trucker-assistant-feature-3 .icon-widget li+li {
  margin-top: 1em
}

@media not all and (min-width: 768px) {
  .trucker-assistant-feature-3 {
      text-align:center
  }

  .trucker-assistant-feature-3 .layout-max {
      display: flex;
      flex-direction: column-reverse
  }

  .trucker-assistant-feature-3 .layout-max .text-container {
      padding: 0;
      margin-top: 0
  }

  .trucker-assistant-feature-3 .layout-max .global-full-background-container {
      margin-bottom: calc(var(--row-gap)/2)
  }
}

@media (min-width: 768px) {
  .trucker-assistant-feature-3 .row.float {
      z-index:1;
      position: relative;
      top: calc(var(--font-size-h1)*2)
  }
}

.trucker-assistant-feature-3 .text-container {
  padding-left: var(--font-size-h1);
  padding-bottom: var(--font-size-h1);
  background: var(--color-primary-white)
}

.trucker-assistant-feature-3 .text-container .list {
  display: flex
}

.trucker-assistant-feature-3 .text-container .list .item+.item {
  margin-left: calc(var(--font-size-quote)*1.5)
}

@media not all and (min-width: 768px) {
  .trucker-assistant-feature-3 .text-container .list {
      flex-wrap:wrap
  }

  .trucker-assistant-feature-3 .text-container .list .item {
      flex: 1 0 50%
  }

  .trucker-assistant-feature-3 .text-container .list .item+.item {
      margin-left: 0
  }
}

.trucker-assistant-feature-3 .text-container .list .num {
  margin-top: var(--font-size-h1);
  font-size: var(--font-size-quote);
  font-weight: var(--semibold)
}

.trucker-assistant-feature-4 {
  margin: var(--row-gap) 0
}

@media not all and (min-width: 768px) {
  .trucker-assistant-feature-4 {
      text-align:center
  }

  .trucker-assistant-feature-4 .row {
      flex-direction: column-reverse
  }

  .trucker-assistant-feature-4 .global-feature-picture {
      margin-bottom: calc(var(--row-gap)/2)
  }
}

.trucker-assistant-feature-5 {
  margin: var(--row-gap) 0
}

@media not all and (min-width: 768px) {
  .trucker-assistant-feature-5 {
      text-align:center
  }
}

.trucker-assistant-clients {
  position: relative;
  margin-top: var(--row-gap);
  padding: var(--row-gap) 0
}

.trucker-assistant-clients h3 {
  font-weight: var(--bold);
  letter-spacing: .25em;
  text-align: center;
  margin-bottom: var(--font-size-h1)
}

.trucker-assistant-clients .stories-container {
  position: relative
}

.trucker-assistant-clients .stories-container .stories-content-container {
  height: 100%;
  background: var(--color-primary-white);
  padding: var(--font-size-h1) calc(var(--font-size-h1)*2)
}

.trucker-assistant-clients .stories-container .stories-content-container .stories-content {
  line-height: 150%;
  font-size: var(--font-size-h3)
}

@media (min-width: 1024px) {
  .trucker-assistant-clients .stories-container .stories-content-container .stories-content {
      font-size:var(--font-size-h2)
  }
}

.trucker-assistant-clients .stories-container .stories-content-container .stories-content .label {
  color: var(--color-secondary-beige);
  margin-bottom: .5em
}

.trucker-assistant-clients .stories-container .stories-content-container .stories-content .name-container {
  font-size: var(--font-size-h3);
  font-weight: var(--semibold);
  margin-bottom: 1em
}

.trucker-assistant-clients .stories-container .stories-content-container .stories-content .name-container .avatar {
  border-radius: 40px;
  width: 40px;
  height: 40px;
  margin-right: .5em
}

.trucker-assistant-clients .stories-container .stories-content-container .stories-content .name-container .name {
  margin-right: .5em
}

.trucker-assistant-clients .stories-container .stories-content-container .stories-content .name-container .company {
  color: var(--color-secondary-beige)
}

.trucker-assistant-clients .stories-container .stories-content-container .stories-content b {
  border-bottom: 4px solid var(--color-secondary-beige)
}

.trucker-assistant-clients .stories-container .stories-content-container .control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3em;
  font-size: var(--font-size-h3)
}

.trucker-assistant-clients .stories-container .stories-content-container .control .serial {
  color: var(--color-secondary-beige)
}

.trucker-assistant-clients .stories-container .stories-content-container .control .action {
  display: flex;
  align-items: center
}

.trucker-assistant-clients .stories-container .stories-content-container .control .action .left,.trucker-assistant-clients .stories-container .stories-content-container .control .action .right {
  cursor: pointer
}

.trucker-assistant-clients .stories-container .stories-content-container .control .action .left.disabled svg,.trucker-assistant-clients .stories-container .stories-content-container .control .action .right.disabled svg {
  fill: var(--color-gray-gray-300)
}

.trucker-assistant-clients .stories-container .stories-content-container .control .action .right {
  margin-left: 1.5em
}

.trucker-assistant-clients .stories-container .stories-content-container .control .action svg {
  height: 1em;
  width: auto;
  fill: var(--color-primary-black)
}

.trucker-assistant-clients .half-background {
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50vw;
  right: 0;
  background-color: var(--page-theme-color)
}

.trucker-assistant-cta {
  margin: calc(var(--row-gap)) 0;
  text-align: center
}

@media (min-width: 768px) {
  .trucker-assistant-cta {
      margin:calc(var(--row-gap)*2/3) 0
  }
}

.trucker-assistant-cta h2 {
  margin-bottom: calc(var(--row-gap)/2)
}

.trucker-assistant-cta .action {
  display: inline-flex;
  margin: 0 auto;
  align-items: center
}

@media not all and (min-width: 768px) {
  .trucker-assistant-cta .action {
      display:flex;
      justify-content: center;
      flex-wrap: wrap
  }

  .trucker-assistant-cta .action .global-qrcode {
      margin: 2em
  }

  .trucker-assistant-cta .action .elements-button {
      flex-basis: 100%;
      display: flex;
      align-items: center;
      justify-content: center
  }

  .trucker-assistant-cta .action>.elements-button~.elements-button {
      margin-top: 1.5em;
      margin-left: 0
  }
}

.trucker-assistant-cta .global-qrcode {
  margin: 0 4em 0 0
}

.page-safety-management {
  --page-theme-color: var(--color-blue-gray-100)
}

.safety-management-intro {
  position: relative;
  padding-top: var(--row-gap)
}

.safety-management-feature-1 {
  margin: var(--row-gap) 0
}

.safety-management-feature-1 h2 {
  margin-bottom: 1em;
  text-align: center
}

.safety-management-feature-1 .global-full-background-container {
  z-index: -1
}

.safety-management-feature-1 .global-tabs-row {
  box-shadow: var(--elevation-low);
  margin: calc(var(--font-size-h1)*-1) 32px 0
}

.safety-management-feature-1 .global-tabs-row-phone {
  box-shadow: var(--elevation-low);
  margin: calc(var(--font-size-h1)*-1) 24px 0
}

.safety-management-feature-2 {
  margin: var(--row-gap) 0;
  padding: var(--row-gap) 0;
  background: var(--color-primary-black)
}

@media not all and (min-width: 768px) {
  .safety-management-feature-2 {
      text-align:center
  }
}

.safety-management-feature-2 .heading {
  margin-bottom: calc(var(--font-size-h1)*1.5)
}

@media not all and (min-width: 768px) {
  .safety-management-feature-2 .section-1 {
      flex-flow:column-reverse
  }
}

@media (min-width: 768px) {
  .safety-management-feature-2 .section-1 .video-container {
      position:relative
  }

  .safety-management-feature-2 .section-1 .video-container .video-mask {
      width: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%)
  }

  .safety-management-feature-2 .section-1 .video-container .video-mask:before {
      content: "";
      z-index: 2;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: radial-gradient(50% 50% at 50% 50%,rgba(10,10,10,0) 80%,#0a0a0a 100%)
  }
}

.safety-management-feature-2 .section-2 {
  margin-top: var(--row-gap)
}

@media not all and (min-width: 768px) {
  .safety-management-feature-2 .section-2 .global-feature-picture {
      margin-bottom:calc(var(--row-gap)/2)
  }
}

.safety-management-feature-3 {
  margin: var(--row-gap) 0
}

@media not all and (min-width: 768px) {
  .safety-management-feature-3 {
      text-align:center
  }

  .safety-management-feature-3 .row {
      flex-direction: column-reverse
  }

  .safety-management-feature-3 .global-feature-picture {
      margin-bottom: calc(var(--row-gap)/2)
  }
}

.safety-management-feature-4 {
  margin: var(--row-gap) 0;
  text-align: center
}

@media (min-width: 768px) {
  .safety-management-feature-4 {
      text-align:left
  }
}

.safety-management-feature-4 .col+.col {
  margin-top: calc(var(--row-gap)/2)
}

@media not all and (min-width: 768px) {
  .safety-management-feature-4 .global-picture-widget {
      display:none
  }
}

.safety-management-feature-4 .global-picture-widget .head {
  display: flex;
  align-items: flex-end
}

.safety-management-feature-4 .global-picture-widget .head img {
  border-radius: 100px;
  max-width: 64px;
  min-height: 64px;
  margin-right: 1em
}

.safety-management-feature-4 .global-picture-widget .head .score h3 {
  margin-top: .35em
}

.safety-management-feature-4 .global-picture-widget ul {
  margin: 1em 0;
  border-bottom: 1px solid var(--color-secondary-gray)
}

.safety-management-feature-4 .global-picture-widget ul li {
  margin-left: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4em 0;
  border-top: 1px solid var(--color-secondary-gray)
}

.safety-management-feature-4 .global-picture-widget ul li .name {
  font-size: var(--font-size-description);
  font-weight: 400
}

.safety-management-feature-4 .global-picture-widget ul li .socre {
  color: var(--color-primary-black);
  font-weight: var(--semibold)
}

.safety-management-feature-4 .global-picture-widget ul li+li {
  margin-top: 0
}

.safety-management-feature-4 .global-picture-widget ul li .name-placeholder {
  display: block;
  height: 12px;
  width: 10em;
  background: var(--color-gray-gray-100)
}

.safety-management-feature-4 .global-picture-widget ul li:nth-child(2) .name-placeholder,.safety-management-feature-4 .global-picture-widget ul li:nth-child(4) .name-placeholder {
  width: 7.5em
}

.safety-management-feature-4 .global-picture-widget ul li:nth-child(3) .name-placeholder,.safety-management-feature-4 .global-picture-widget ul li:nth-child(5) .name-placeholder {
  width: 5em
}

.page-smart-trailer {
  --page-theme-color: var(--color-gray-gray-100)
}

.page-smart-trailer .global-product-hero-image {
  background-color: var(--color-gray-gray-100)
}

@media not all and (min-width: 768px) {
  .page-smart-trailer .global-product-hero-image img {
      width:145%;
      max-width: 616px;
      bottom: -15%;
      transform: translateX(-35%)
  }
}

@media (min-width: 768px) {
  .page-smart-trailer .global-product-hero-image img {
      top:50%;
      right: -35vw;
      transform: translateY(-50%)
  }
}

.smart-trailer-intro {
  position: relative;
  padding: calc(var(--row-gap)*1.5) 0;
  text-align: center
}

.smart-trailer-feature-1 {
  margin: var(--row-gap) 0
}

.smart-trailer-feature-1 h2 {
  margin-bottom: 1em;
  text-align: center
}

.smart-trailer-feature-1 .global-full-background-container {
  z-index: -1;
  overflow: hidden
}

.smart-trailer-feature-2 {
  position: relative;
  margin: var(--row-gap) 0
}

@media not all and (min-width: 768px) {
  .smart-trailer-feature-2 {
      text-align:center
  }

  .smart-trailer-feature-2 .row {
      flex-flow: column-reverse
  }

  .smart-trailer-feature-2 .photo-container {
      margin-bottom: calc(var(--row-gap)/2)
  }
}

.smart-trailer-feature-2 .photo-container {
  position: relative
}

.smart-trailer-feature-2 .photo-container .photo {
  background: var(--page-theme-color)
}

.smart-trailer-feature-2 .photo-container .photo img {
  position: relative
}

@media (min-width: 768px) {
  .smart-trailer-feature-2 .photo-container .photo img {
      left:-5em
  }
}

.smart-trailer-feature-2 .half-background {
  z-index: -1;
  background-color: var(--page-theme-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

@media (min-width: 768px) {
  .smart-trailer-feature-2 .half-background {
      right:50vw
  }
}

.smart-trailer-feature-3 .global-full-background-container {
  margin-bottom: calc(var(--font-size-h1)*1.5)
}

@media not all and (min-width: 768px) {
  .smart-trailer-feature-3 {
      text-align:center
  }

  .smart-trailer-feature-3 .global-feature-block {
      margin-bottom: var(--font-size-h1)
  }
}

@media not all and (min-width: 1024px) {
  .smart-trailer-feature-3 h2 {
      margin-bottom:calc(var(--row-gap)/2)
  }
}

.smart-trailer-feature-4 {
  position: relative;
  padding: var(--row-gap) 0
}

.smart-trailer-feature-4 h2 {
  text-align: center;
  margin-bottom: 1em
}

.smart-trailer-feature-4 .list .global-feature-block {
  margin: 1em 0
}

@media (min-width: 768px) {
  .smart-trailer-feature-4 .list .global-feature-block {
      margin:3em 0;
      padding: 0 4em
  }
}

.smart-trailer-feature-5 {
  margin-bottom: var(--row-gap);
  overflow: hidden
}

.smart-trailer-feature-5 h2 {
  text-align: center;
  margin-bottom: 1em
}

.smart-trailer-feature-5 .trailer {
  cursor: pointer;
  text-align: center
}

.smart-trailer-feature-5 .trailer .trailer-mock {
  margin: 2em 0;
  transition: opacity .3s ease
}

@media (min-width: 768px) {
  .smart-trailer-feature-5 .trailer .trailer-mock img {
      position:relative;
      width: 150%;
      max-width: 150%;
      left: 50%;
      transform: translateX(-50%)
  }
}

.smart-trailer-feature-5 .trailer .trailer-mock.notActive {
  opacity: .05
}

.smart-trailer-feature-5 .trailer h3 {
  display: inline-flex;
  align-items: center
}

.smart-trailer-feature-5 .trailer h3 svg {
  margin-left: .5em;
  transition: transform .3s ease
}

@media not all and (min-width: 768px) {
  .smart-trailer-feature-5 .detail {
      position:fixed;
      z-index: 100;
      top: 6em;
      right: 2em;
      bottom: 6em;
      left: 2em;
      background-color: var(--color-primary-white);
      box-shadow: var(--elevation-high);
      border-radius: 1em;
      overflow: scroll;
      -webkit-overflow-scrolling: touch
  }

  .smart-trailer-feature-5 .detail .detail-column .product-name {
      margin-top: .5em
  }

  .smart-trailer-feature-5 .detail .bar-for-mobile {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      width: 100%;
      background: var(--color-primary-white);
      border-bottom: 1px solid var(--color-gray-gray-50);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1em
  }

  .smart-trailer-feature-5 .detail .bar-for-mobile span {
      font-weight: var(--bold)
  }
}

@media (min-width: 768px) {
  .smart-trailer-feature-5 .detail {
      margin-top:2em
  }

  .smart-trailer-feature-5 .detail .bar-for-mobile {
      display: none
  }
}

.smart-trailer-feature-5 .detail .detail-column p {
  margin: 1.5rem 0
}

.smart-trailer-feature-5 .detail .detail-column .product-name {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-primary-black)
}

.smart-trailer-feature-5 .detail .detail-column .spec {
  font-size: var(--font-size-description);
  color: var(--color-primary-black);
  display: flex;
  justify-content: space-between
}

.smart-trailer-feature-5 .detail .detail-column .spec .spec-name {
  color: var(--color-gray-black-50)
}

.smart-trailer-feature-5 .detail .detail-column .spec .spec-value {
  text-align: right
}

.page-big-data .global-hero-video-container video {
  -o-object-fit: contain;
  object-fit: contain
}

@media not all and (min-width: 768px) {
  .page-big-data .global-hero-video-container video {
      -o-object-position:0 80%;
      object-position: 0 80%
  }
}

.page-big-data .global-footer-cta {
  background: var(--color-primary-white)
}

.big-data-panel {
  position: relative;
  background: #111922
}

.big-data-panel .elements-product-logo {
  z-index: 10;
  position: absolute;
  left: 50vw;
  transform: translateX(-50%) translateY(100%)
}

.big-data-panel .global-hero-video-play-button-icon {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%)
}

.big-data-panel .video-max-container {
  width: 100%
}

.big-data-panel .video-max-container img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover
}

.big-data-list {
  padding: var(--row-gap) 0;
  background: var(--color-primary-black)
}

.big-data-list .num {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--semibold);
  display: flex;
  align-items: center
}

@media not all and (min-width: 1200px) {
  .big-data-list .num {
      justify-content:center
  }
}

.big-data-list .num .unit {
  position: relative;
  top: -.65em
}

.big-data-list .num .unit span {
  margin-left: .5em;
  font-size: var(--font-size-body);
  font-weight: var(--semibold)
}

.big-data-list .key-data {
  text-align: center;
  margin-bottom: calc(var(--row-gap)/2)
}

.big-data-list .key-data .num {
  justify-content: center;
  font-size: calc(var(--font-size-h1)*2);
  line-height: calc(var(--line-height-h1)*2)
}

.big-data-list .key-data .num .unit {
  top: -.35em
}

.big-data-list .key-data .num .unit span {
  font-size: var(--font-size-h2);
  font-weight: var(--bold)
}

.big-data-list .big-data-list-grid {
  display: flex
}

.big-data-list .big-data-list-grid>* {
  flex-grow: 1
}

@media not all and (min-width: 1200px) {
  .big-data-list .big-data-list-grid {
      flex-direction:column;
      text-align: center;
      align-items: center
  }

  .big-data-list .big-data-list-grid>*+* {
      margin-top: 2em
  }
}

.big-data-charts {
  padding: calc(var(--row-gap)/2) 0;
  text-align: center
}

.big-data-charts .bar-container {
  position: relative;
  height: 50vh
}

.big-data-charts .bar-container .error {
  position: absolute;
  left: 0;
  right: 0;
  top: -1em;
  bottom: -.5em;
  background: hsla(0,0%,92.2%,.5);
  display: flex;
  align-items: center;
  justify-content: center
}

.big-data-charts .bar-container .error .text {
  font-size: 1.5rem
}

.big-data-charts .big-data-charts-tips {
  text-align: left;
  margin-top: 2em
}

.big-data-charts h2 {
  margin-bottom: 1.5em
}

.big-data-charts .tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2em;
  margin-bottom: 2em
}

@media not all and (min-width: 768px) {
  .big-data-charts .tools select {
      width:100%;
      margin-bottom: 1em
  }

  .big-data-charts .tools .left,.big-data-charts .tools .right {
      flex: 1 1 100%
  }
}

.big-data-charts .tools .left {
  display: flex
}

@media not all and (min-width: 1140px) {
  .big-data-charts .tools .left {
      margin-bottom:1em
  }
}

@media not all and (min-width: 768px) {
  .big-data-charts .tools .left {
      margin-bottom:0
  }
}

.big-data-charts .tools .right {
  display: flex
}

.big-data-charts .tools .right .input-type-date {
  width: 16em
}

.big-data-charts .tools .right select[name=dateType] {
  border-right: 0
}

@media not all and (min-width: 768px) {
  .big-data-charts .tools .right {
      flex-flow:column
  }

  .big-data-charts .tools .right .ant-picker,.big-data-charts .tools .right .input-type-date {
      width: 100%
  }

  .big-data-charts .tools .right select[name=dateType] {
      border-right: 2px solid
  }
}

@media (min-width: 768px) {
  .big-data-charts .tools .right [name=province] {
      margin-right:1em
  }
}

.big-data-news {
  background: var(--color-gray-gray-50);
  padding: calc(var(--row-gap)/2) 0
}

.big-data-news h2 {
  margin-bottom: 1em
}

.big-data-news .big-data-news-list {
  margin-bottom: -1.5em
}

.big-data-news .big-data-news-list>* {
  margin-bottom: 1.5em
}

.big-data-news .big-data-news-list .big-data-news-item-container .big-data-news-item {
  background: var(--color-primary-white);
  padding: 1em;
  border-radius: 2px;
  transition: box-shadow .3s ease
}

.big-data-news .big-data-news-list .big-data-news-item-container .big-data-news-item:hover {
  box-shadow: var(--elevation-high)
}

.big-data-news .big-data-news-list .big-data-news-item-container .big-data-news-item .cover {
  margin-top: 1em;
  position: relative;
  background: var(--page-theme-color);
  width: 100%;
  padding-top: 120%
}

.big-data-news .big-data-news-list .big-data-news-item-container .big-data-news-item .cover>* {
  position: absolute
}

.big-data-news .big-data-news-list .big-data-news-item-container .big-data-news-item .cover .image-container {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.big-data-news .big-data-news-list .big-data-news-item-container .big-data-news-item .cover .image-container img {
  z-index: 1;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  vertical-align: middle;
  width: 100%
}

.big-data-news .big-data-news-list .big-data-news-item-container .big-data-news-item .cover .long {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: justify;
  color: var(--color-gray-gray-600);
  padding: 1em;
  overflow: scroll
}

.big-data-news .big-data-news-list .big-data-news-item-container .big-data-news-item h3 {
  overflow: hidden;
  position: relative;
  height: calc(var(--line-height-h3)*2)
}

.big-data-news .big-data-news-list .big-data-news-item-container .big-data-news-item h3:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: var(--line-height-h3);
  background: linear-gradient(90deg,hsla(0,0%,100%,0),#fff 50%)
}

.big-data-news .big-data-news-list .big-data-news-item-container .big-data-news-item .updated {
  text-align: center
}

.big-data-news .big-data-news-list .big-data-news-item-container .big-data-news-item-meta {
  text-align: center;
  margin-top: 1em
}

.page-about {
  --page-theme-color: var(--color-gray-gray-100)
}

.about-intro {
  position: relative;
  padding: var(--row-gap) 0;
  font-size: var(--font-size-h3);
  line-height: 200%
}

.about-intro p+p {
  margin-top: 1em
}

.about-ceo-letter {
  position: relative;
  background: none;
  background-color: #211f22
}

@media not all and (min-width: 768px) {
  .about-ceo-letter {
      text-align:center
  }

  .about-ceo-letter .global-full-background-container {
      display: flex;
      flex-flow: column-reverse
  }
}

.about-ceo-letter .full-background-layer {
  z-index: 0;
  background-color: unset;
  background-image: url(/static/ceo-9f86943c023fd2cb84aaac45c5d151ad.jpg);
  background-repeat: no-repeat
}

@media not all and (min-width: 768px) {
  .about-ceo-letter .full-background-layer {
      background-size:cover;
      background-position: top right -10vw
  }
}

@media (min-width: 768px) {
  .about-ceo-letter .full-background-layer {
      background-size:contain;
      background-position: top right 5vw
  }
}

@media not all and (min-width: 768px) {
  .about-ceo-letter .layout-max {
      padding-top:var(--row-gap)
  }
}

@media (min-width: 768px) {
  .about-ceo-letter .layout-max {
      position:relative;
      top: 50%;
      transform: translateY(-50%)
  }
}

.about-history {
  margin: var(--row-gap) 0;
  overflow: hidden
}

.about-history h2 {
  margin-bottom: 2em
}

.about-history .timeline {
  display: flex
}

.about-history .timeline .year-container {
  border-left: 1px solid var(--color-gray-black-50);
  background: var(--color-primary-white)
}

.about-history .timeline .year-container .year {
  cursor: pointer;
  padding: 0 2em;
  min-height: 60vh;
  width: 400px;
  display: flex;
  flex-flow: column
}

.about-history .timeline .year-container .year h2 {
  margin-bottom: 4em;
  color: var(--color-gray-gray-300)
}

.about-history .timeline .year-container .year p {
  color: var(--color-gray-gray-300)
}

.about-history .timeline .year-container .year p+p {
  margin-top: 1em
}

.about-history .timeline .year-container .year.active h2 {
  color: var(--color-primary-black)
}

.about-history .timeline .year-container .year.active p {
  color: var(--color-gray-black-50)
}

.about-history .timeline .year-container.mobile .year {
  max-width: 80vw
}

.about-history .timeline .year-container.mobile .year h2 {
  margin-bottom: 3em;
  color: var(--color-primary-black)
}

.about-history .timeline .year-container.mobile .year p {
  color: var(--color-gray-black-50)
}

.about-contact-us {
  position: relative;
  margin: var(--row-gap) 0
}

.about-contact-us .photo-contianer {
  position: relative;
  margin: calc(var(--font-size-h1)*3) 0 calc(var(--font-size-h1)*2)
}

.about-contact-us .photo-contianer .placeholder .photo {
  background: #fff
}

.about-contact-us .photo-contianer .placeholder .description,.about-contact-us .photo-contianer .placeholder .photo img {
  opacity: 0
}

.about-contact-us .photo-contianer .photo-group {
  position: absolute;
  top: 0
}

.about-contact-us .photo-contianer .photo-group .description {
  margin-top: .5em;
  padding: 0 1em;
  line-height: 2em;
  display: inline-block;
  background: var(--color-primary-black);
  color: var(--color-primary-white)
}

.about-contact-us .map-container {
  z-index: -100;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(calc(var(--font-size-h1)*2));
  height: auto;
  width: 100vw;
  max-width: 1440px
}

@media not all and (min-width: 768px) {
  .about-contact-us .map-container .dots {
      display:none
  }
}

.about-contact-us .map-container .dot {
  position: absolute;
  top: 0;
  font-size: var(--font-size-description);
  background: var(--color-primary-black);
  border-radius: 999px;
  width: 1%
}

.about-contact-us .map-container .dot span {
  display: block;
  padding-bottom: 100%
}

.about-contact-us .map-container .dot.id-0 {
  top: 27.4%;
  right: 31%
}

.about-contact-us .map-container .dot.id-1 {
  top: 35.4%;
  right: 26.8%
}

.about-contact-us .map-container .dot.id-2 {
  top: 36.5%;
  right: 35.95%
}

.about-contact-us .map-container .dot.id-3 {
  top: 42.4%;
  right: 31.8%
}

.about-contact-us .map-container .dot .line {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-primary-black);
  height: 1px
}

.about-contact-us .mail-container,.about-contact-us .wechat-container {
  margin-top: calc(var(--font-size-h1)*1.5);
  padding-top: 1.5em;
  border-top: 1px solid #000
}

.about-contact-us .mail-container .description,.about-contact-us .wechat-container .description {
  color: var(--color-primary-black)
}

.about-contact-us .mail-container .description.bold,.about-contact-us .wechat-container .description.bold {
  font-weight: var(--bold)
}

.about-contact-us .mail-container .mail-item,.about-contact-us .wechat-container {
  display: flex
}

@media not all and (min-width: 768px) {
  .about-contact-us .mail-container .mail-item,.about-contact-us .wechat-container {
      display:block
  }

  .about-contact-us .mail-container .mail-item>*,.about-contact-us .wechat-container>* {
      margin-top: 1em
  }
}

.about-contact-us .mail-container .mail-item>*,.about-contact-us .wechat-container>* {
  flex-basis: 50%
}

@media not all and (min-width: 768px) {
  .about-contact-us .wechat-container .qrcode-group {
      display:flex
  }

  .about-contact-us .wechat-container .qrcode-group img {
      flex: 0 0 50%;
      width: 50%;
      height: 50%;
      margin-right: 1em
  }

  .about-contact-us .wechat-container .qrcode-group .tips {
      flex: 0 0 50%
  }
}

@media (min-width: 768px) {
  .about-contact-us .wechat-container .qrcode-group {
      display:flex
  }

  .about-contact-us .wechat-container .qrcode-group img {
      align-self: flex-start;
      flex: 0 0 auto;
      max-width: 50%;
      height: auto;
      margin-right: 1em
  }
}

.about-contact-us .mail-container .mail-item+.mail-item {
  margin-top: 1.5em
}

.page-news {
  --page-theme-color: var(--color-blue-gray-50);
  padding-bottom: var(--row-gap)
}

.page-news .more-tag-action {
  cursor: pointer;
  font-weight: var(--bold);
  border: 1px solid transparent
}

.page-news .more-tag-action svg {
  fill: var(--color-primary-black);
  margin-left: .5em
}

.news-tags-group,.news-tags-row {
  font-size: var(--font-size-description);
  line-height: 3em;
  margin-right: -1em;
  margin-bottom: -1em;
  display: flex;
  flex-wrap: wrap
}

.news-tags-row {
  padding: 2em 0 1em;
  border-bottom: 1px solid var(--color-gray-gray-100)
}

.news-tags-group {
  margin-top: 1.5em
}

.news-tag {
  color: var(--color-gray-gray-600);
  display: block;
  background: var(--color-primary-white);
  border: 1px solid var(--color-gray-gray-100);
  padding: 0 1em;
  margin-right: 1em;
  margin-bottom: 1em
}

.news-tag .count {
  color: var(--color-gray-black-50);
  margin-left: .75em
}

.news-header {
  height: calc(var(--hero-height)/3);
  background: var(--page-theme-color);
  display: flex;
  align-items: center
}

.news-header>* {
  flex: 1 1
}

.news-header .content {
  display: flex;
  align-items: center;
  justify-content: space-between
}

@media not all and (min-width: 768px) {
  .news-header .content {
      justify-content:center
  }
}

.news-header .content input {
  background: var(--color-primary-white);
  padding: .5em
}

.news-header .slash {
  position: relative;
  top: -.075em;
  height: 1em;
  width: auto;
  margin: 0 .5em
}

.news-list-item {
  padding: 2.5em 0;
  border-bottom: 1px solid var(--color-gray-gray-100)
}

.news-list-item .image {
  background: var(--page-theme-color);
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden
}

.news-list-item .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  vertical-align: middle
}

.news-list-item .date {
  font-size: var(--font-size-description);
  color: var(--color-gray-gray-300)
}

.news-list-item .title {
  margin: .5em 0;
  font-size: calc(var(--font-size-body)*1.5);
  font-weight: var(--semibold)
}

@media not all and (min-width: 768px) {
  .news-list-item .date {
      margin-top:1em
  }

  .news-list-item .news-tags-group {
      display: none
  }
}

.news-load-more {
  padding: 4em 0;
  text-align: center
}

.news-load-no-more {
  padding: 2.5em 0;
  text-align: center
}

.page-post {
  --page-theme-color: var(--color-blue-gray-50)
}

.post-header {
  position: relative;
  background: var(--page-theme-color);
  display: flex;
  align-items: center;
  padding: 4em 0
}

@media not all and (min-width: 768px) {
  .post-header {
      padding:2em 0;
      height: calc(var(--hero-height)/2)
  }

  .post-header .layout-max {
      height: 100%
  }

  .post-header .layout-max .row {
      height: 100%;
      flex-flow: column;
      justify-content: space-between
  }

  .post-header .layout-max .row .col {
      flex: none
  }
}

.post-header>* {
  flex: 1 1
}

.post-header .post-header-tags-group {
  display: flex;
  margin-bottom: 1em
}

.post-header .post-header-tags-group *+* {
  margin-left: 1em
}

.post-header .post-header-date {
  margin-top: 1em
}

.post-header h1 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2)
}

.post-header .back svg {
  position: relative;
  top: -.1em;
  margin-right: .5em;
  fill: var(--color-primary-black)
}

.post-header .share {
  text-align: right
}

.post-article {
  color: var(--color-gray-gray-800);
  padding: 2em 0 var(--row-gap);
  line-height: 180%
}

.post-article h1,.post-article h2 {
  font-size: calc(var(--font-size-h2)*3/4)
}

.post-article h1 b,.post-article h1 strong,.post-article h2 b,.post-article h2 strong {
  font-weight: var(--regular)
}

.post-article b,.post-article strong {
  font-weight: var(--semibold)
}

.post-article h1,.post-article h2,.post-article h3,.post-article h4 {
  margin: 1.5em 0;
  line-height: 150%
}

.post-article p+p {
  margin-top: 1.5em
}

.post-article img,.post-article video {
  width: 100%
}

.post-article img,.post-article table {
  margin: 1.5em 0 0
}

.post-article img+img,.post-article p>img {
  margin: 0
}

.post-article blockquote {
  background: var(--color-gray-gray-50);
  color: var(--color-gray-gray-700);
  font-size: var(--font-size-label);
  padding: 1.5em;
  margin: 0 0 1.5em
}

.post-article em {
  font-weight: var(--regular);
  font-style: normal
}

.post-article em,.post-article p a {
  color: var(--color-primary-purple)
}

.post-context {
  display: flex;
  flex-direction: column;
  margin-top: 2em
}

.post-context .post-context-item {
  margin-bottom: 2em;
  background: var(--color-gray-gray-50);
  display: flex;
  align-items: center
}

.post-context .post-context-item .image {
  background: var(--color-blue-gray-100);
  position: relative;
  min-width: 8em;
  padding-bottom: 8em;
  overflow: hidden
}

.post-context .post-context-item .image img {
  margin: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  vertical-align: middle
}

.post-context .post-context-item h3 {
  margin: 1.5em;
  font-weight: var(--semibold)
}

.page-tags {
  --page-theme-color: var(--color-blue-gray-50);
  padding-bottom: var(--row-gap)
}

.page-careers .content .row {
  margin-top: calc(var(--row-gap)/2);
  margin-bottom: calc(var(--row-gap)/2)
}

@media not all and (min-width: 768px) {
  .page-careers .careers-label {
      margin-bottom:2em
  }
}

.page-careers .dividing-line {
  height: 1px;
  background: var(--color-gray-gray-100)
}

.page-careers .group {
  display: flex
}

.page-careers .group+.group {
  margin-top: 4em
}

.page-careers .group h2 {
  flex: none;
  margin-right: 2em
}

.page-careers .global-learn-more {
  margin: var(--row-gap) 0
}

.page-404 {
  background: var(--color-primary-black)
}

.page-404 .message {
  height: var(--hero-height)
}

.page-404 .message .display-title {
  font-family: var(--font-family-heading);
  font-weight: var(--bold);
  color: var(--color-secondary-beige)
}

.page-404 .message h3 {
  line-height: 150%
}

@media not all and (min-width: 768px) {
  .page-404 .message {
      display:flex;
      flex-flow: column;
      justify-content: center;
      text-align: center
  }

  .page-404 .message .display-title {
      font-size: 20vw
  }

  .page-404 .message h3 {
      margin-top: 1em
  }
}

@media (min-width: 768px) {
  .page-404 .message {
      display:flex;
      align-items: center
  }

  .page-404 .message .display-title {
      font-size: 10vw
  }

  .page-404 .message h3 {
      margin-left: 2em
  }
}

.page-solutions {
  background: var(--color-gray-gray-50)
}

.page-solutions .solutions-header {
  background: var(--color-primary-white)
}

.page-solutions .solutions-tags {
  display: flex;
  flex-wrap: wrap;
  margin: 3em 0 1.5em
}

@media (min-width: 768px) {
  .page-solutions .solutions-tags {
      justify-content:center
  }
}

.page-solutions .solutions-tags .solutions-tag-item {
  flex: none;
  cursor: pointer;
  font-size: var(--font-size-description);
  color: var(--color-gray-gray-600);
  padding: .5em 1em;
  background: var(--color-primary-white);
  margin-bottom: 1.5em;
  margin-right: 1.5em
}

.page-solutions .solutions-tags .solutions-tag-item.active {
  background: var(--color-gray-black);
  color: var(--color-primary-white)
}

.page-solutions .solutions-grid {
  margin-top: -2em
}

.page-solutions .solutions-grid .col {
  margin-top: 2em
}

.page-solutions .global-footer-cta {
  background: var(--color-primary-white)
}

.page-investor-login {
  background: var(--color-gray-gray-50);
  min-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center
}

@media (min-width: 768px) {
  .page-investor-login {
      min-height:80vh
  }
}

.page-investor-login .login-container {
  background: var(--color-primary-white);
  padding: var(--font-size-h1);
  margin: var(--font-size-h1);
  box-shadow: 0 12px 24px rgba(0,0,0,.16)
}

@media not all and (min-width: 768px) {
  .page-investor-login .login-container {
      margin:calc(var(--font-size-h1)*2) var(--font-size-h1)
  }
}

.page-investor-login .login-container h2 {
  margin-bottom: 1em
}

.page-investor-login .login-container .error-message {
  font-size: var(--font-size-description);
  color: var(--color-secondary-red);
  padding: 1em;
  background: rgba(236,79,69,.1);
  border: 1px solid var(--color-secondary-red)
}

.page-investor-login .login-container form {
  width: 100%
}

.page-investor-login .login-container form label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-gray-gray-500);
  font-size: var(--font-size-description);
  margin-top: 1.5em;
  margin-bottom: .5em
}

.page-investor-login .login-container form input {
  width: 100%
}

.page-investor-login .login-container form .elements-button {
  width: 100%;
  justify-content: center;
  margin-top: 2em
}

.page-investor {
  background: var(--color-gray-gray-50)
}

.page-investor .investor-heading {
  margin-bottom: 1em
}

.page-investor .investor-news {
  overflow: hidden;
  padding: 0 0 6em
}

.page-investor .investor-news .news-container {
  padding: 0
}

@media not all and (min-width: 768px) {
  .page-investor .investor-report {
      padding:2em 0
  }

  .page-investor .investor-report .investor-report-quarter-col {
      margin-bottom: 1em
  }
}

@media (min-width: 768px) {
  .page-investor .investor-report {
      padding:4em 0 6em
  }
}

.page-investor .investor-report .investor-report-quarter {
  background: var(--color-primary-white);
  padding: 1.5em;
  height: 100%
}

.page-investor .investor-report .investor-report-quarter h3 {
  margin-bottom: .75em
}

.page-investor .investor-report .investor-report-quarter p {
  margin-bottom: .5em
}

.page-investor .investor-report .investor-report-quarter a {
  font-size: var(--font-size-description);
  color: var(--color-secondary-blue)
}

.page-investor .investor-report .investor-report-quarter svg {
  margin-left: .5em
}

.page-investor .global-footer-cta {
  background: var(--color-primary-white)
}

:root:lang(en-US) .heading,:root:lang(en-US) h1 {
  font-weight: var(--bold);
  font-size: calc(var(--font-size-h1)*0.9)
}

:root:lang(en-US) h2 {
  font-weight: var(--bold);
  font-size: calc(var(--font-size-h2)*0.9)
}

:root:lang(en-US) h3 {
  font-weight: var(--semibold);
  font-size: calc(var(--font-size-h3)*0.9)
}

:root:lang(en-US) .global-header nav.phone {
  top: 70px
}

:root:lang(en-US) .news-card .news-card-content {
  overflow: hidden;
  min-height: 14.95em
}

:root:lang(en-US) .news-card .news-card-content .title {
  font-size: calc(var(--font-size-h3)*0.9)
}

:root:lang(en-US) .page-post h1 {
  font-size: var(--font-size-h2)
}

:root:lang(en-US) .comma {
  display: none
}

:root:lang(en-US) .hack-nowrap {
  white-space: unset
}

:root:lang(en-US) .about-ceo-letter h2,:root:lang(en-US) .elements-product-logo span,:root:lang(en-US) .global-product-hero h2 {
  white-space: nowrap
}

:root:lang(en-US) .elements-button .label {
  text-transform: uppercase;
  white-space: nowrap
}

:root:lang(en-US) .global-clients-title {
  font-weight: var(--bold)
}

:root:lang(en-US) .home-stories-news .stories-container .content-container .stories-group .storie {
  text-align: left;
  line-height: 150%
}

:root:lang(en-US) .page-careers .group h2 {
  width: 4em
}

:root:lang(en-US) .global-qrcode span {
  letter-spacing: 1px
}

:root:lang(en-US) .home-reel .fixed-screen .text-section-container .text-section .products {
  flex-wrap: wrap
}

:root:lang(en-US) .big-data-news-item-container .big-data-news-item .cover .long {
  text-align: left
}

:root:lang(en-US) .big-data-news-item-container .big-data-news-item h3 {
  height: calc(var(--line-height-h3)*3)
}

:root:lang(en-US) .global-footer .global-qrcode span {
  white-space: nowrap;
  justify-content: left
}

:root:lang(en-US) .page-smart-trailer .global-tabs-row .tab {
  padding: var(--font-size-h2)
}

@media (min-width: 1024px) {
  :root:lang(en-US) .home-g7-bigdata .col-md-offset-0,:root:lang(en-US) .home-g7-bigdata .col-md-offset-1 {
      margin-left:calc(1/var(--column)*100%)
  }
}

@media not all and (min-width: 768px) {
  :root:lang(en-US) .tag-decoration {
      display:none
  }
}

@media not all and (min-width: 420px) {
  :root:lang(en-US) .home-hero h1 {
      font-size:calc(var(--font-size-h1)*1)
  }

  :root:lang(en-US) .about-ceo-letter h2 {
      white-space: unset
  }

  :root:lang(en-US) .home-reel .fixed-screen .text-section-container .text-section .products {
      flex-wrap: wrap
  }

  :root:lang(en-US) .home-g7-bigdata {
      margin-top: calc(var(--row-gap)*-1)
  }

  :root:lang(en-US) .trucker-assistant-clients .avatar {
      float: left
  }

  :root:lang(en-US) .trucker-assistant-clients .company,:root:lang(en-US) .trucker-assistant-clients .name {
      display: block
  }

  :root:lang(en-US) .trucker-assistant-clients .stories-container .stories-content-container {
      padding: var(--font-size-h1) calc(var(--font-size-h1)*1)
  }

  :root:lang(en-US) .page-safety-management .global-hero-video-play-button-container .global-hero-video-play-button-icon {
      transform: translateY(100%)
  }
}

@media not all and (min-width: 376px) {
  :root:lang(en-US) .home-g7-bigdata {
      margin-top:0
  }
}

.ant-picker {
  box-sizing: border-box;
  margin: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 3em;
  padding: .6em 1.5em;
  border: 2px solid var(--color-primary-black);
  color: var(--color-primary-black)
}

.ant-picker.ant-picker-disabled {
  background: #f5f5f5;
  border-color: #d9d9d9;
  cursor: not-allowed
}

.ant-picker.ant-picker-disabled .ant-picker-suffix {
  color: rgba(0,0,0,.25)
}

.ant-picker.ant-picker-borderless {
  background-color: transparent!important;
  border-color: transparent!important;
  box-shadow: none!important
}

.ant-picker-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%
}

.ant-picker-input>input {
  position: relative;
  display: inline-block;
  width: 8em;
  min-width: 0;
  line-height: 1.5em;
  background-image: none;
  transition: all .3s;
  flex: auto;
  min-width: 1px;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0
}

.ant-picker-input>input:-ms-input-placeholder {
  color: #bfbfbf
}

.ant-picker-input>input::placeholder {
  color: #bfbfbf
}

.ant-picker-input>input:-ms-input-placeholder {
  text-overflow: ellipsis
}

.ant-picker-input>input:placeholder-shown {
  text-overflow: ellipsis
}

.ant-picker-input>input:hover {
  border-color: #40a9ff;
  border-right-width: 1px!important
}

.ant-picker-input>input-focused,.ant-picker-input>input:focus {
  border-color: #40a9ff;
  border-right-width: 1px!important;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(24,144,255,.2)
}

.ant-picker-input>input-disabled {
  color: rgba(0,0,0,.25);
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 1
}

.ant-picker-input>input-disabled:hover {
  border-color: #d9d9d9;
  border-right-width: 1px!important
}

.ant-picker-input>input[disabled] {
  color: rgba(0,0,0,.25);
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 1
}

.ant-picker-input>input[disabled]:hover {
  border-color: #d9d9d9;
  border-right-width: 1px!important
}

.ant-picker-input>input-borderless,.ant-picker-input>input-borderless-disabled,.ant-picker-input>input-borderless-focused,.ant-picker-input>input-borderless:focus,.ant-picker-input>input-borderless:hover,.ant-picker-input>input-borderless[disabled] {
  background-color: transparent;
  border: none;
  box-shadow: none
}

textarea.ant-picker-input>input {
  max-width: 100%;
  height: auto;
  min-height: 32px;
  line-height: 1.5715;
  vertical-align: bottom;
  transition: all .3s,height 0s
}

.ant-picker-input>input-lg {
  padding: 6.5px 11px;
  font-size: 16px
}

.ant-picker-input>input-sm {
  padding: 0 7px
}

.ant-picker-input>input:focus {
  box-shadow: none
}

.ant-picker-input>input[disabled] {
  background: transparent
}

.ant-picker-input:hover .ant-picker-clear {
  opacity: 1
}

.ant-picker-input-placeholder>input {
  color: #bfbfbf
}

.ant-picker-large {
  padding: 6.5px 11px
}

.ant-picker-large .ant-picker-input>input {
  font-size: 16px
}

.ant-picker-small {
  padding: 0 7px
}

.ant-picker-suffix {
  align-self: center;
  margin-left: 4px;
  color: rgba(0,0,0,.3);
  line-height: 1;
  pointer-events: none
}

.ant-picker-suffix>* {
  vertical-align: top
}

.ant-picker-clear {
  position: absolute;
  top: 50%;
  right: 0;
  color: rgba(0,0,0,.3);
  line-height: 1;
  background: #fff;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s,color .3s
}

.ant-picker-clear>* {
  vertical-align: top
}

.ant-picker-clear:hover {
  color: #000
}

.ant-picker-separator {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 16px;
  color: rgba(0,0,0,.25);
  font-size: 16px;
  vertical-align: top;
  cursor: default
}

.ant-picker-focused .ant-picker-separator {
  color: rgba(0,0,0,.45)
}

.ant-picker-disabled .ant-picker-range-separator .ant-picker-separator {
  cursor: not-allowed
}

.ant-picker-range {
  position: relative;
  display: inline-flex
}

.ant-picker-range .ant-picker-clear {
  right: 1.5em
}

.ant-picker-range:hover .ant-picker-clear {
  opacity: 1
}

.ant-picker-range .ant-picker-active-bar {
  bottom: -1px;
  height: 2px;
  margin-left: 11px;
  background: var(--color-primary-purple);
  opacity: 0;
  transition: all .3s ease-out;
  pointer-events: none
}

.ant-picker-range.ant-picker-focused .ant-picker-active-bar {
  opacity: 1
}

.ant-picker-range-separator {
  align-items: center;
  padding-right: 1em;
  line-height: 1
}

.ant-picker-range.ant-picker-small .ant-picker-clear {
  right: 7px
}

.ant-picker-range.ant-picker-small .ant-picker-active-bar {
  margin-left: 7px
}

.ant-picker-dropdown {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0,0,0,.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum";
  position: absolute;
  z-index: 1050;
  pointer-events: auto!important
}

.ant-picker-dropdown-hidden {
  display: none
}

.ant-picker-dropdown-placement-bottomLeft .ant-picker-range-arrow {
  top: 1.66666667px;
  display: block;
  transform: rotate(-45deg)
}

.ant-picker-dropdown-placement-topLeft .ant-picker-range-arrow {
  bottom: 1.66666667px;
  display: block;
  transform: rotate(135deg)
}

.ant-picker-dropdown.slide-up-appear.slide-up-appear-active.ant-picker-dropdown-placement-topLeft,.ant-picker-dropdown.slide-up-appear.slide-up-appear-active.ant-picker-dropdown-placement-topRight,.ant-picker-dropdown.slide-up-enter.slide-up-enter-active.ant-picker-dropdown-placement-topLeft,.ant-picker-dropdown.slide-up-enter.slide-up-enter-active.ant-picker-dropdown-placement-topRight {
  animation-name: antSlideDownIn
}

.ant-picker-dropdown.slide-up-appear.slide-up-appear-active.ant-picker-dropdown-placement-bottomLeft,.ant-picker-dropdown.slide-up-appear.slide-up-appear-active.ant-picker-dropdown-placement-bottomRight,.ant-picker-dropdown.slide-up-enter.slide-up-enter-active.ant-picker-dropdown-placement-bottomLeft,.ant-picker-dropdown.slide-up-enter.slide-up-enter-active.ant-picker-dropdown-placement-bottomRight {
  animation-name: antSlideUpIn
}

.ant-picker-dropdown.slide-up-leave.slide-up-leave-active.ant-picker-dropdown-placement-topLeft,.ant-picker-dropdown.slide-up-leave.slide-up-leave-active.ant-picker-dropdown-placement-topRight {
  animation-name: antSlideDownOut
}

.ant-picker-dropdown.slide-up-leave.slide-up-leave-active.ant-picker-dropdown-placement-bottomLeft,.ant-picker-dropdown.slide-up-leave.slide-up-leave-active.ant-picker-dropdown-placement-bottomRight {
  animation-name: antSlideUpOut
}

.ant-picker-dropdown-range {
  padding: 6.66666667px 0
}

.ant-picker-dropdown-range-hidden {
  display: none
}

.ant-picker-dropdown .ant-picker-panel>.ant-picker-time-panel {
  padding-top: 4px
}

.ant-picker-ranges {
  margin-bottom: 0;
  padding: 4px 12px;
  overflow: hidden;
  line-height: 34px;
  text-align: left;
  list-style: none
}

.ant-picker-ranges>li {
  display: inline-block
}

.ant-picker-ranges .ant-picker-preset>.ant-tag-blue {
  color: var(--color-primary-purple);
  background: #e6f7ff;
  border-color: #91d5ff;
  cursor: pointer
}

.ant-picker-ranges .ant-picker-ok {
  float: right;
  margin-left: 8px
}

.ant-picker-range-wrapper {
  display: flex
}

.ant-picker-range-arrow {
  position: absolute;
  z-index: 1;
  display: none;
  width: 10px;
  height: 10px;
  margin-left: 16.5px;
  box-shadow: 2px -2px 6px rgba(0,0,0,.06);
  transition: left .3s ease-out
}

.ant-picker-range-arrow:after {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-color: #fff #fff transparent transparent;
  border-style: solid;
  border-width: 5px;
  content: ""
}

.ant-picker-panel-container {
  overflow: hidden;
  vertical-align: top;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 6px -4px rgba(0,0,0,.12),0 6px 16px 0 rgba(0,0,0,.08),0 9px 28px 8px rgba(0,0,0,.05);
  transition: margin .3s
}

.ant-picker-panel-container .ant-picker-panels {
  display: inline-flex;
  flex-wrap: nowrap;
  direction: ltr
}

.ant-picker-panel-container .ant-picker-panel {
  vertical-align: top;
  background: transparent;
  border-width: 0 0 1px;
  border-radius: 0
}

.ant-picker-panel-container .ant-picker-panel-focused {
  border-color: #f0f0f0
}

.ant-picker-panel {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 2px;
  outline: none
}

.ant-picker-panel-focused {
  border-color: var(--color-primary-purple)
}

.ant-picker-date-panel,.ant-picker-decade-panel,.ant-picker-month-panel,.ant-picker-quarter-panel,.ant-picker-time-panel,.ant-picker-week-panel,.ant-picker-year-panel {
  display: flex;
  flex-direction: column;
  width: 280px
}

.ant-picker-header {
  display: flex;
  padding: 0 8px;
  color: rgba(0,0,0,.85);
  border-bottom: 1px solid #f0f0f0
}

.ant-picker-header>* {
  flex: none
}

.ant-picker-header button {
  padding: 0;
  color: rgba(0,0,0,.25);
  line-height: 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .3s
}

.ant-picker-header>button {
  min-width: 1.6em;
  font-size: 14px
}

.ant-picker-header>button:hover {
  color: rgba(0,0,0,.85)
}

.ant-picker-header-view {
  flex: auto;
  font-weight: 500;
  line-height: 40px
}

.ant-picker-header-view button {
  color: inherit;
  font-weight: inherit
}

.ant-picker-header-view button:not(:first-child) {
  margin-left: 8px
}

.ant-picker-header-view button:hover {
  color: var(--color-primary-purple)
}

.ant-picker-next-icon,.ant-picker-prev-icon,.ant-picker-super-next-icon,.ant-picker-super-prev-icon {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px
}

.ant-picker-next-icon:before,.ant-picker-prev-icon:before,.ant-picker-super-next-icon:before,.ant-picker-super-prev-icon:before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 7px;
  height: 7px;
  border: 0 solid;
  border-width: 1.5px 0 0 1.5px;
  content: ""
}

.ant-picker-super-next-icon:after,.ant-picker-super-prev-icon:after {
  position: absolute;
  top: 4px;
  left: 4px;
  display: inline-block;
  width: 7px;
  height: 7px;
  border: 0 solid;
  border-width: 1.5px 0 0 1.5px;
  content: ""
}

.ant-picker-prev-icon,.ant-picker-super-prev-icon {
  transform: rotate(-45deg)
}

.ant-picker-next-icon,.ant-picker-super-next-icon {
  transform: rotate(135deg)
}

.ant-picker-content {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse
}

.ant-picker-content td,.ant-picker-content th {
  position: relative;
  min-width: 24px;
  font-weight: 400
}

.ant-picker-content th {
  height: 30px;
  color: rgba(0,0,0,.85);
  line-height: 30px
}

.ant-picker-cell {
  padding: 3px 0;
  color: rgba(0,0,0,.25);
  cursor: pointer
}

.ant-picker-cell-in-view {
  color: rgba(0,0,0,.85)
}

.ant-picker-cell-disabled {
  cursor: not-allowed
}

.ant-picker-cell:before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 1;
  height: 24px;
  transform: translateY(-50%);
  content: ""
}

.ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner {
  background: #f5f5f5
}

.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  border: 1px solid var(--color-primary-purple);
  border-radius: 2px;
  content: ""
}

.ant-picker-cell-in-view.ant-picker-cell-in-range {
  position: relative
}

.ant-picker-cell-in-view.ant-picker-cell-in-range:before {
  background: #e6f7ff
}

.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner,.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
  color: #fff;
  background: var(--color-primary-purple)
}

.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single):before,.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single):before {
  background: #e6f7ff
}

.ant-picker-cell-in-view.ant-picker-cell-range-start:before {
  left: 50%
}

.ant-picker-cell-in-view.ant-picker-cell-range-end:before {
  right: 50%
}

.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single:after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover:after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single:after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover:after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):after,.ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range):after {
  position: absolute;
  top: 50%;
  z-index: 0;
  height: 24px;
  border-top: 1px dashed #7ec1ff;
  border-bottom: 1px dashed #7ec1ff;
  transform: translateY(-50%);
  content: ""
}

.ant-picker-cell-range-hover-end:after,.ant-picker-cell-range-hover-start:after,.ant-picker-cell-range-hover:after {
  right: 0;
  left: 2px
}

.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover:before,.ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover:before,.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end:before,.ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover:before,.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start:before,.ant-picker-panel>:not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end:before,.ant-picker-panel>:not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start:before {
  background: #cbe6ff
}

.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single):not(.ant-picker-cell-range-end) .ant-picker-cell-inner {
  border-radius: 2px 0 0 2px
}

.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single):not(.ant-picker-cell-range-start) .ant-picker-cell-inner {
  border-radius: 0 2px 2px 0
}

.ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end .ant-picker-cell-inner:after,.ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner:after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: #cbe6ff;
  content: ""
}

.ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner:after {
  right: -6px;
  left: 0
}

.ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end .ant-picker-cell-inner:after {
  right: 0;
  left: -6px
}

.ant-picker-cell-range-hover.ant-picker-cell-range-start:after {
  right: 50%
}

.ant-picker-cell-range-hover.ant-picker-cell-range-end:after {
  left: 50%
}

.ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-start:not(.ant-picker-cell-range-hover-edge-start-near-range):after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-start:after,.ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range:after,tr>.ant-picker-cell-in-view.ant-picker-cell-range-hover-end:first-child:after,tr>.ant-picker-cell-in-view.ant-picker-cell-range-hover:first-child:after {
  left: 6px;
  border-left: 1px dashed #7ec1ff;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px
}

.ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range:after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-end:not(.ant-picker-cell-range-hover-edge-end-near-range):after,.ant-picker-cell-in-view.ant-picker-cell-range-hover-end:after,tr>.ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child:after,tr>.ant-picker-cell-in-view.ant-picker-cell-range-hover:last-child:after {
  right: 6px;
  border-right: 1px dashed #7ec1ff;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px
}

.ant-picker-cell-disabled {
  pointer-events: none
}

.ant-picker-cell-disabled .ant-picker-cell-inner {
  color: rgba(0,0,0,.25);
  background: transparent
}

.ant-picker-cell-disabled:before {
  background: #f5f5f5
}

.ant-picker-cell-disabled.ant-picker-cell-today .ant-picker-cell-inner:before {
  border-color: rgba(0,0,0,.25)
}

.ant-picker-decade-panel .ant-picker-content,.ant-picker-month-panel .ant-picker-content,.ant-picker-quarter-panel .ant-picker-content,.ant-picker-year-panel .ant-picker-content {
  height: 264px
}

.ant-picker-decade-panel .ant-picker-cell-inner,.ant-picker-month-panel .ant-picker-cell-inner,.ant-picker-quarter-panel .ant-picker-cell-inner,.ant-picker-year-panel .ant-picker-cell-inner {
  padding: 0 8px
}

.ant-picker-decade-panel .ant-picker-cell-disabled .ant-picker-cell-inner,.ant-picker-month-panel .ant-picker-cell-disabled .ant-picker-cell-inner,.ant-picker-quarter-panel .ant-picker-cell-disabled .ant-picker-cell-inner,.ant-picker-year-panel .ant-picker-cell-disabled .ant-picker-cell-inner {
  background: #f5f5f5
}

.ant-picker-quarter-panel .ant-picker-content {
  height: 56px
}

.ant-picker-footer {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  min-width: 100%;
  line-height: 38px;
  text-align: center;
  border-bottom: 1px solid transparent
}

.ant-picker-panel .ant-picker-footer {
  border-top: 1px solid #f0f0f0
}

.ant-picker-footer-extra {
  padding: 0 12px;
  line-height: 38px;
  text-align: left
}

.ant-picker-footer-extra:not(:last-child) {
  border-bottom: 1px solid #f0f0f0
}

.ant-picker-now {
  text-align: left
}

.ant-picker-today-btn {
  color: var(--color-primary-purple);
  cursor: pointer
}

.ant-picker-today-btn:hover {
  opacity: .8
}

.ant-picker-today-btn.ant-picker-today-btn-disabled {
  color: rgba(0,0,0,.25);
  cursor: not-allowed
}

.ant-picker-decade-panel .ant-picker-cell-inner {
  padding: 0 4px
}

.ant-picker-decade-panel .ant-picker-cell:before {
  display: none
}

.ant-picker-month-panel .ant-picker-body,.ant-picker-quarter-panel .ant-picker-body,.ant-picker-year-panel .ant-picker-body {
  padding: 0 8px
}

.ant-picker-month-panel .ant-picker-cell-inner,.ant-picker-quarter-panel .ant-picker-cell-inner,.ant-picker-year-panel .ant-picker-cell-inner {
  width: 60px
}

.ant-picker-month-panel .ant-picker-cell-range-hover-start:after,.ant-picker-quarter-panel .ant-picker-cell-range-hover-start:after,.ant-picker-year-panel .ant-picker-cell-range-hover-start:after {
  left: 14px;
  border-left: 1px dashed #7ec1ff;
  border-radius: 2px 0 0 2px
}

.ant-picker-month-panel .ant-picker-cell-range-hover-end:after,.ant-picker-panel-rtl .ant-picker-month-panel .ant-picker-cell-range-hover-start:after,.ant-picker-panel-rtl .ant-picker-quarter-panel .ant-picker-cell-range-hover-start:after,.ant-picker-panel-rtl .ant-picker-year-panel .ant-picker-cell-range-hover-start:after,.ant-picker-quarter-panel .ant-picker-cell-range-hover-end:after,.ant-picker-year-panel .ant-picker-cell-range-hover-end:after {
  right: 14px;
  border-right: 1px dashed #7ec1ff;
  border-radius: 0 2px 2px 0
}

.ant-picker-panel-rtl .ant-picker-month-panel .ant-picker-cell-range-hover-end:after,.ant-picker-panel-rtl .ant-picker-quarter-panel .ant-picker-cell-range-hover-end:after,.ant-picker-panel-rtl .ant-picker-year-panel .ant-picker-cell-range-hover-end:after {
  left: 14px;
  border-left: 1px dashed #7ec1ff;
  border-radius: 2px 0 0 2px
}

.ant-picker-week-panel .ant-picker-body {
  padding: 8px 12px
}

.ant-picker-week-panel .ant-picker-cell-selected .ant-picker-cell-inner,.ant-picker-week-panel .ant-picker-cell .ant-picker-cell-inner,.ant-picker-week-panel .ant-picker-cell:hover .ant-picker-cell-inner {
  background: transparent!important
}

.ant-picker-week-panel-row td {
  transition: background .3s
}

.ant-picker-week-panel-row:hover td {
  background: #f5f5f5
}

.ant-picker-week-panel-row-selected:hover td,.ant-picker-week-panel-row-selected td {
  background: var(--color-primary-purple)
}

.ant-picker-week-panel-row-selected:hover td.ant-picker-cell-week,.ant-picker-week-panel-row-selected td.ant-picker-cell-week {
  color: hsla(0,0%,100%,.5)
}

.ant-picker-week-panel-row-selected:hover td.ant-picker-cell-today .ant-picker-cell-inner:before,.ant-picker-week-panel-row-selected td.ant-picker-cell-today .ant-picker-cell-inner:before {
  border-color: #fff
}

.ant-picker-week-panel-row-selected:hover td .ant-picker-cell-inner,.ant-picker-week-panel-row-selected td .ant-picker-cell-inner {
  color: #fff
}

.ant-picker-date-panel .ant-picker-body {
  padding: 8px 12px
}

.ant-picker-date-panel .ant-picker-content {
  width: 252px
}

.ant-picker-date-panel .ant-picker-content th {
  width: 36px
}

.ant-picker-datetime-panel {
  display: flex
}

.ant-picker-datetime-panel .ant-picker-time-panel {
  border-left: 1px solid #f0f0f0
}

.ant-picker-datetime-panel .ant-picker-date-panel,.ant-picker-datetime-panel .ant-picker-time-panel {
  transition: opacity .3s
}

.ant-picker-datetime-panel-active .ant-picker-date-panel,.ant-picker-datetime-panel-active .ant-picker-time-panel {
  opacity: .3
}

.ant-picker-datetime-panel-active .ant-picker-date-panel-active,.ant-picker-datetime-panel-active .ant-picker-time-panel-active {
  opacity: 1
}

.ant-picker-time-panel {
  width: auto;
  min-width: auto
}

.ant-picker-time-panel .ant-picker-content {
  display: flex;
  flex: auto;
  height: 224px
}

.ant-picker-time-panel-column {
  flex: 1 0 auto;
  width: 56px;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  text-align: left;
  list-style: none;
  transition: background .3s
}

.ant-picker-time-panel-column:after {
  display: block;
  height: 196px;
  content: ""
}

.ant-picker-datetime-panel .ant-picker-time-panel-column:after {
  height: 198px
}

.ant-picker-time-panel-column:not(:first-child) {
  border-left: 1px solid #f0f0f0
}

.ant-picker-time-panel-column-active {
  background: rgba(230,247,255,.2)
}

.ant-picker-time-panel-column:hover {
  overflow-y: auto
}

.ant-picker-time-panel-column>li {
  margin: 0;
  padding: 0
}

.ant-picker-time-panel-column>li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner {
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0 0 0 14px;
  color: rgba(0,0,0,.85);
  line-height: 28px;
  border-radius: 0;
  cursor: pointer;
  transition: background .3s
}

.ant-picker-time-panel-column>li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover {
  background: #f5f5f5
}

.ant-picker-time-panel-column>li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
  background: #e6f7ff
}

.ant-picker-time-panel-column>li.ant-picker-time-panel-cell-disabled .ant-picker-time-panel-cell-inner {
  color: rgba(0,0,0,.25);
  background: transparent;
  cursor: not-allowed
}

:root .ant-picker-range-wrapper .ant-picker-month-panel .ant-picker-cell,:root .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-cell,_:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-month-panel .ant-picker-cell,_:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-cell {
  padding: 21px 0
}

.ant-picker-rtl {
  direction: rtl
}

.ant-picker-rtl .ant-picker-suffix {
  margin-right: 4px;
  margin-left: 0
}

.ant-picker-rtl .ant-picker-clear {
  right: auto;
  left: 0
}

.ant-picker-rtl .ant-picker-separator {
  transform: rotate(180deg)
}

.ant-picker-panel-rtl .ant-picker-header-view button:not(:first-child) {
  margin-right: 8px;
  margin-left: 0
}

.ant-picker-rtl.ant-picker-range .ant-picker-clear {
  right: auto;
  left: 11px
}

.ant-picker-rtl.ant-picker-range .ant-picker-active-bar {
  margin-right: 11px;
  margin-left: 0
}

.ant-picker-rtl.ant-picker-range.ant-picker-small .ant-picker-active-bar {
  margin-right: 7px
}

.ant-picker-dropdown-rtl .ant-picker-ranges {
  text-align: right
}

.ant-picker-dropdown-rtl .ant-picker-ranges .ant-picker-ok {
  float: left;
  margin-right: 8px;
  margin-left: 0
}

.ant-picker-panel-rtl {
  direction: rtl
}

.ant-picker-panel-rtl .ant-picker-prev-icon,.ant-picker-panel-rtl .ant-picker-super-prev-icon {
  transform: rotate(135deg)
}

.ant-picker-panel-rtl .ant-picker-next-icon,.ant-picker-panel-rtl .ant-picker-super-next-icon {
  transform: rotate(-45deg)
}

.ant-picker-cell .ant-picker-cell-inner {
  position: relative;
  z-index: 2;
  display: inline-block;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 2px;
  transition: background .3s,border .3s
}

.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-range-start:before {
  right: 50%;
  left: 0
}

.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-range-end:before {
  right: 0;
  left: 50%
}

.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-end:before {
  right: 50%;
  left: 50%
}

.ant-picker-panel-rtl .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner:after {
  right: 0;
  left: -6px
}

.ant-picker-panel-rtl .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end .ant-picker-cell-inner:after {
  right: -6px;
  left: 0
}

.ant-picker-panel-rtl .ant-picker-cell-range-hover.ant-picker-cell-range-start:after {
  right: 0;
  left: 50%
}

.ant-picker-panel-rtl .ant-picker-cell-range-hover.ant-picker-cell-range-end:after {
  right: 50%;
  left: 0
}

.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single):not(.ant-picker-cell-range-end) .ant-picker-cell-inner {
  border-radius: 0 2px 2px 0
}

.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single):not(.ant-picker-cell-range-start) .ant-picker-cell-inner {
  border-radius: 2px 0 0 2px
}

.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-start:not(.ant-picker-cell-range-hover-edge-start-near-range):after,.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:after,.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start.ant-picker-cell-range-hover-edge-start-near-range:after,.ant-picker-panel-rtl tr>.ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-selected):first-child:after {
  right: 6px;
  left: 0;
  border-right: 1px dashed #7ec1ff;
  border-left: none;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0
}

.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-edge-end.ant-picker-cell-range-hover-edge-end-near-range:after,.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-range-hover-edge-end:not(.ant-picker-cell-range-hover-edge-end-near-range):after,.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-range-hover-end:after,.ant-picker-panel-rtl tr>.ant-picker-cell-in-view.ant-picker-cell-range-hover:not(.ant-picker-cell-selected):last-child:after {
  right: 0;
  left: 6px;
  border-right: none;
  border-left: 1px dashed #7ec1ff;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px
}

.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover-start.ant-picker-cell-range-hover-edge-end:not(.ant-picker-cell-range-hover):after,.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-edge-start:not(.ant-picker-cell-range-hover):after,.ant-picker-panel-rtl .ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover-end.ant-picker-cell-range-hover-edge-start:not(.ant-picker-cell-range-hover):after,.ant-picker-panel-rtl tr>.ant-picker-cell-in-view.ant-picker-cell-end.ant-picker-cell-range-hover.ant-picker-cell-range-hover-edge-end:first-child:after,.ant-picker-panel-rtl tr>.ant-picker-cell-in-view.ant-picker-cell-range-hover-end:first-child:after,.ant-picker-panel-rtl tr>.ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child:after,.ant-picker-panel-rtl tr>.ant-picker-cell-in-view.ant-picker-cell-start.ant-picker-cell-range-hover.ant-picker-cell-range-hover-edge-start:last-child:after {
  right: 6px;
  left: 6px;
  border-right: 1px dashed #7ec1ff;
  border-left: 1px dashed #7ec1ff;
  border-radius: 2px
}

.ant-picker-dropdown-rtl .ant-picker-footer-extra {
  direction: rtl;
  text-align: right
}

.ant-picker-panel-rtl .ant-picker-time-panel {
  direction: ltr
}

@keyframes antSlideUpIn {
  0% {
      transform: scaleY(.8);
      transform-origin: 0 0;
      opacity: 0
  }

  to {
      transform: scaleY(1);
      transform-origin: 0 0;
      opacity: 1
  }
}

@keyframes antSlideUpOut {
  0% {
      transform: scaleY(1);
      transform-origin: 0 0;
      opacity: 1
  }

  to {
      transform: scaleY(.8);
      transform-origin: 0 0;
      opacity: 0
  }
}

@keyframes antSlideDownIn {
  0% {
      transform: scaleY(.8);
      transform-origin: 100% 100%;
      opacity: 0
  }

  to {
      transform: scaleY(1);
      transform-origin: 100% 100%;
      opacity: 1
  }
}

@keyframes antSlideDownOut {
  0% {
      transform: scaleY(1);
      transform-origin: 100% 100%;
      opacity: 1
  }

  to {
      transform: scaleY(.8);
      transform-origin: 100% 100%;
      opacity: 0
  }
}

@keyframes antSlideLeftIn {
  0% {
      transform: scaleX(.8);
      transform-origin: 0 0;
      opacity: 0
  }

  to {
      transform: scaleX(1);
      transform-origin: 0 0;
      opacity: 1
  }
}

@keyframes antSlideLeftOut {
  0% {
      transform: scaleX(1);
      transform-origin: 0 0;
      opacity: 1
  }

  to {
      transform: scaleX(.8);
      transform-origin: 0 0;
      opacity: 0
  }
}

@keyframes antSlideRightIn {
  0% {
      transform: scaleX(.8);
      transform-origin: 100% 0;
      opacity: 0
  }

  to {
      transform: scaleX(1);
      transform-origin: 100% 0;
      opacity: 1
  }
}

@keyframes antSlideRightOut {
  0% {
      transform: scaleX(1);
      transform-origin: 100% 0;
      opacity: 1
  }

  to {
      transform: scaleX(.8);
      transform-origin: 100% 0;
      opacity: 0
  }
}