@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/catalog/view/javascript/font/Roboto/Roboto-Light.ttf');
}
.roboto-font {
  font-family: 'Roboto';
}
.rc-ride-height-gauge {
  background-color: #F3F9FA;
  overflow: hidden;
  position: sticky;
  top: 0;
  left: 0;
  --boxWidth: 1830px;
  --boxHeight: calc(var(--boxWidth) / 12.2);
  --barColor: #FFF;
  /* 带鱼屏适配 */
  /* 2K以上 屏幕比例小于带鱼屏 适配 */
  /* 适配 宽大于高的 屏幕 */
  /* 适配 宽小于高的 屏幕 */
}
.rc-ride-height-gauge .rc-ride-height-gauge-first {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  transition: opacity 0.8s 2s;
  background-color: #000;
}
.rc-ride-height-gauge .rc-ride-height-gauge-imgbox {
  width: 1920px;
  max-width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rc-ride-height-gauge .rcridevideobg {
  font-size: 0;
}
.rc-ride-height-gauge .rcridevideobgbox {
  position: relative;
  width: 100%;
}
.rc-ride-height-gauge .rcridevideobgboxbox {
  overflow: hidden;
  max-width: 100%;
}
.rc-ride-height-gauge .gauge-logo-box {
  height: var(--boxHeight);
  display: flex;
  width: var(--boxWidth);
  margin: 0 auto;
}
.rc-ride-height-gauge .gauge-logo-start,
.rc-ride-height-gauge .gauge-logo-sanbox,
.rc-ride-height-gauge .gauge-logo-end {
  height: 100%;
}
.rc-ride-height-gauge .gauge-logo-start img,
.rc-ride-height-gauge .gauge-logo-sanbox img,
.rc-ride-height-gauge .gauge-logo-end img {
  display: inline-block;
  width: auto;
  height: 100%;
}
.rc-ride-height-gauge .gauge-logo-sanbox {
  width: calc(var(--boxHeight) * 0.4);
  margin-left: calc(var(--boxHeight) * 0.3);
  display: flex;
  align-items: center;
  transition: width 0.8s ease-in-out;
}
.rc-ride-height-gauge .gauge-logo-san-i {
  width: calc(var(--boxHeight) * 0.085);
  height: var(--boxHeight);
  background-color: var(--barColor);
  position: absolute;
  top: 0%;
  left: 0%;
}
.rc-ride-height-gauge [class^="gauge-logo-san-gauge-"] {
  height: calc(var(--boxHeight) * 0.085);
  background-color: var(--barColor);
  position: absolute;
  max-width: 0;
  transition: max-width 0.8s, transform 0.3s 0.8S;
}
.rc-ride-height-gauge .gauge-logo-san-gauge-3,
.rc-ride-height-gauge .gauge-logo-san-gauge-5 {
  transition: max-width 0.8s, transform 0.6s 0.8S;
}
.rc-ride-height-gauge .gauge-logo-san-gauge-1,
.rc-ride-height-gauge .gauge-logo-san-gauge-3,
.rc-ride-height-gauge .gauge-logo-san-gauge-5 {
  width: calc(var(--boxHeight) * 0.22);
}
.rc-ride-height-gauge .gauge-logo-san-gauge-2,
.rc-ride-height-gauge .gauge-logo-san-gauge-4 {
  width: calc(var(--boxHeight) * 0.3);
}
.rc-ride-height-gauge .gauge-logo-san-gauge-1 {
  position: relative;
}
.rc-ride-height-gauge .rc-ride-height-gauge-txtbox {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  -webkit-mask: url(/image/catalog/product/accessory/measurement/500049/1-mark.png?20210610AaBa);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
}
.rc-ride-height-gauge .rc-ride-height-gauge-txt {
  position: absolute;
  left: 45%;
  top: 25%;
  line-height: 1.1;
  background-color: rgba(6, 16, 29, 0.7);
  padding: 0.6em 1em;
  color: #fff;
  text-align: right;
  font-size: 52px;
  border-radius: 0.5em;
  font-weight: 100;
  opacity: 0;
  transition: opacity 0.8s 4s;
}
.rc-ride-height-gauge .rc-ride-height-gauge-txt-logo {
  width: 14.5em;
  margin-top: 0.2em;
}
.rc-ride-height-gauge .rc-ride-height-gauge-txt-bigtxt {
  font-size: 1.8em;
  font-weight: 100;
  font-family: 'Roboto', serif;
}
.rc-ride-height-gauge.showtxt .rc-ride-height-gauge-first {
  opacity: 0;
}
.rc-ride-height-gauge.showtxt .gauge-logo-san-i {
  opacity: 0;
}
.rc-ride-height-gauge.showtxt .rc-ride-height-gauge-txt {
  opacity: 1;
}
.rc-ride-height-gauge.showtxt .gauge-logo-sanbox {
  width: calc(var(--boxHeight) * 0.6);
}
.rc-ride-height-gauge.showtxt [class^="gauge-logo-san-gauge-"] {
  max-width: calc(var(--boxHeight) * 0.3);
}
.rc-ride-height-gauge.showtxt .gauge-logo-san-gauge-2 {
  transform: translateY(calc(var(--boxHeight) * 0.46 * -1));
}
.rc-ride-height-gauge.showtxt .gauge-logo-san-gauge-3 {
  transform: translateY(calc(var(--boxHeight) * 0.92 * -1));
}
.rc-ride-height-gauge.showtxt .gauge-logo-san-gauge-4 {
  transform: translateY(calc(var(--boxHeight) * 0.46));
}
.rc-ride-height-gauge.showtxt .gauge-logo-san-gauge-5 {
  transform: translateY(calc(var(--boxHeight) * 0.92));
}
@media only screen and (min-width: 1960px) and (min-aspect-ratio: 1050/500) {
  .rc-ride-height-gauge .rc-ride-height-gauge-txt-bigtxt br {
    display: none;
  }
  .rc-ride-height-gauge .rc-ride-height-gauge-txt {
    top: 32%;
  }
  .rc-ride-height-gauge .rc-ride-height-gauge-txt-logo {
    margin-left: auto;
  }
}
@media only screen and (max-width: 1920px) {
  .rc-ride-height-gauge {
    --boxWidth: 1530px;
  }
  .rc-ride-height-gauge .rc-ride-height-gauge-txt {
    font-size: 3vw;
  }
}
@media only screen and (max-width: 1680px) {
  .rc-ride-height-gauge {
    --boxWidth: 1200px;
  }
  .rc-ride-height-gauge .rc-ride-height-gauge-txt {
    font-size: 3vw;
  }
}
@media only screen and (max-width: 1380px) {
  .rc-ride-height-gauge {
    --boxWidth: 1000px;
  }
}
@media only screen and (max-width: 1080px) {
  .rc-ride-height-gauge {
    --boxWidth: 900px;
    padding-top: 60px;
  }
  .rc-ride-height-gauge .rcridevideobg {
    width: 125vw;
  }
  .rc-ride-height-gauge .rc-ride-height-gauge-txt {
    transform: translateX(-50%);
    left: 50%;
    top: 20%;
  }
  .rc-ride-height-gauge .rc-ride-height-gauge-imgbox {
    align-items: flex-start;
  }
}
@media only screen and (max-width: 1025px) {
  .rc-ride-height-gauge {
    --boxWidth: 80vw;
  }
}
@media screen and (max-width: 1025px) and (max-aspect-ratio: 768/850) {
  .rc-ride-height-gauge .rc-ride-height-gauge-txtbox {
    -webkit-mask: none;
  }
  .rc-ride-height-gauge .rc-ride-height-gauge-txt-logo {
    margin-top: 0.5em;
  }
}
@media only screen and (max-width: 580px) {
  .rc-ride-height-gauge {
    padding-top: calc(10svh + 30vw);
  }
  .rc-ride-height-gauge .rc-ride-height-gauge-txt {
    transform: translateX(-50%);
    left: 50%;
    top: -17%;
    font-size: 4.9vw;
    text-align: center;
  }
  .rc-ride-height-gauge .ilb-midel {
    top: 55%;
  }
  .rc-ride-height-gauge .rcridevideobg {
    width: 166vw;
    margin-left: -22vw;
  }
}
/* 带鱼屏适配 */
/* 2K以上 屏幕比例小于带鱼屏 适配 */
/* 适配 宽大于高的 屏幕 */
/* 适配 宽小于高的 屏幕 */