@import "base.css";
.container .index .bg {
  width: 100%;
}
.container .index .logo {
  position: absolute;
  left: 100px;
  top: 130px;
  width: 500px;
  height: 100px;
}
.container .index .jump-block {
  opacity: 0;
  position: absolute;
  width: 930px;
  height: 345px;
}
.container .index .phm-block {
  left: 120px;
  top: 1455px;
  background-image: url("../images/index/block1.png");
}
.container .index .phm-block .icon {
  position: absolute;
  left: 0;
  top: -30px;
  width: 405px;
  height: 408px;
}
.container .index .phm-block .text {
  position: absolute;
  left: 350px;
  top: 100px;
  width: 522px;
  height: 144px;
}
.container .index .door-block {
  left: 1170px;
  top: 1455px;
  background-image: url("../images/index/block2.png");
}
.container .index .door-block .icon {
  position: absolute;
  left: 0;
  top: -30px;
  width: 407px;
  height: 407px;
}
.container .index .door-block .text {
  position: absolute;
  left: 350px;
  top: 100px;
  width: 360px;
  height: 143px;
}
.container .index .hvac-block {
  left: 2220px;
  top: 1455px;
  background-image: url("../images/index/block3.png");
}
.container .index .hvac-block .text {
  position: absolute;
  left: 350px;
  top: 100px;
  width: 349px;
  height: 144px;
}
.container .index .hvac-block .icon {
  position: absolute;
  left: 0;
  top: -30px;
  width: 424px;
  height: 402px;
}
.container .index .brake-block {
  left: 3270px;
  top: 1455px;
  background-image: url("../images/index/block4.png");
}
.container .index .brake-block .text {
  position: absolute;
  left: 350px;
  top: 100px;
  width: 385px;
  height: 144px;
}
.container .index .brake-block .icon {
  position: absolute;
  left: -10px;
  top: -20px;
  width: 414px;
  height: 394px;
}
.container .index .door-light {
  position: absolute;
  left: 1762px;
  top: 831px;
  width: 301px;
  height: 547px;
}
.container .index .hvac-light {
  position: absolute;
  left: 1974px;
  top: 521px;
  width: 616px;
  height: 145px;
}
.container .index .brake-light {
  position: absolute;
  left: 2752px;
  top: 892px;
  width: 1008px;
  height: 398px;
}
.container .index .left-skew {
  position: absolute;
  top: 121px;
  left: 800px;
  display: flex;
  justify-content: space-between;
  width: 470px;
}
.container .index .left-skew .item {
  opacity: 0;
  width: 42px;
  height: 100px;
  background-color: #013a77;
  transform: skewX(43deg);
}
.container .index .right-skew {
  position: absolute;
  top: 121px;
  left: 3044px;
  display: flex;
  justify-content: space-between;
  width: 470px;
}
.container .index .right-skew .item {
  opacity: 0;
  width: 42px;
  height: 100px;
  background-color: #013a77;
  transform: skewX(-43deg);
}
.container .index .door-line {
  position: absolute;
  left: 1480px;
  top: 1231px;
  width: 466px;
  height: 228px;
}
.container .index .door-line .svg-container {
  overflow: visible;
}
.container .index .door-line .polyline {
  stroke-dasharray: 466;
  stroke-dashoffset: 466;
}
.container .index .door-line .right-line {
  stroke-dasharray: 155;
  stroke-dashoffset: 155;
}
.container .index .door-line .left-line {
  stroke-dasharray: 155;
  stroke-dashoffset: 155;
}
.container .index .hvac-line {
  position: absolute;
  left: 2485px;
  top: 560px;
  width: 355px;
  height: 895px;
}
.container .index .hvac-line .polyline {
  stroke-dasharray: 925;
  stroke-dashoffset: 925;
}
.container .index .hvac-line .right-line {
  stroke-dasharray: 155;
  stroke-dashoffset: 155;
}
.container .index .hvac-line .left-line {
  stroke-dasharray: 155;
  stroke-dashoffset: 155;
}
.container .index .brake-line {
  position: absolute;
  left: 3415px;
  top: 924px;
  width: 475px;
  height: 531px;
}
.container .index .brake-line .polyline {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
.container .index .brake-line .right-line {
  stroke-dasharray: 155;
  stroke-dashoffset: 155;
}
.container .index .brake-line .left-line {
  stroke-dasharray: 155;
  stroke-dashoffset: 155;
}
.container .index .video-trigger {
  position: absolute;
  right: 9px;
  top: 76px;
  width: 750px;
  height: 200px;
}
.container .index .jumpBlockClass {
  animation: I-showAni 1.5s forwards 1.5s, I-fadeAni 1s infinite alternate 2.9s linear;
}
.container .index .skew1Class {
  animation: I-skewAni 5s ease-out 0s infinite;
}
.container .index .skew2Class {
  animation: I-skewAni 5s ease-out 0.3s infinite;
}
.container .index .skew3Class {
  animation: I-skewAni 5s ease-out 0.6s infinite;
}
.container .index .skew4Class {
  animation: I-skewAni 5s ease-out 0.9s infinite;
}
.container .index .skew5Class {
  animation: I-skewAni 5s ease-out 1.2s infinite;
}
.container .index .skew6Class {
  animation: I-skewAni 5s ease-out 1.5s infinite;
}
.container .index .skew7Class {
  animation: I-skewAni 5s ease-out 1.8s infinite;
}
.container .index .skew8Class {
  animation: I-skewAni 5s ease-out 2.1s infinite;
}
.container .index .polylineClass {
  animation: I-draw 1.2s linear forwards;
}
.container .index .rightLineClass {
  animation: I-draw 0.4s linear forwards 1.1s;
}
.container .index .leftLineClass {
  animation: I-draw 0.4s linear forwards 1.1s;
}
.container .index .dotAni {
  animation: I-dotAni 0.8s forwards alternate infinite;
}
.container .index .doorClass {
  animation: I-doorAni 1.4s alternate infinite linear;
}
@keyframes I-skewAni {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes I-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes I-showAni {
  to {
    opacity: 1;
  }
}
@keyframes I-fadeAni {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.6;
  }
}
@keyframes I-dotAni {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes I-doorAni {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}
.menu {
  display: none;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  transition: opacity 0.3s;
}
.menu .inner {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 550px;
  border-radius: 10px;
  overflow: hidden;
  transform-origin: left top;
}
.menu .inner .head {
  display: flex;
  width: 100%;
  height: 40px;
  background-color: #014180;
  border-radius: 10px 10px 0px 0px;
}
.menu .inner .head .close {
  -webkit-touch-callout: default;
  -webkit-user-select: all;
  user-select: all;
  pointer-events: all;
  margin-left: auto;
  padding: 10px;
  width: 22px;
  height: 22px;
}
.menu .inner .content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 60px);
  background-color: #0d0b12;
  border: solid 2px #003f7e;
  box-sizing: border-box;
}
.menu .inner .content .item {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 30px;
  width: 100%;
  border-bottom: 2px solid #003f7e;
  box-sizing: border-box;
}
.menu .inner .content .item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25px;
  width: 60px;
  height: 60px;
}
.menu .inner .content .item .dot {
  display: none;
  margin-left: auto;
  width: 19px;
  height: 19px;
  background-color: #0a4681;
  border-radius: 19px;
}
.menu .inner .content .item .active {
  display: block;
}
.menu .inner .bot {
  width: 100%;
  height: 20px;
  background-color: #014180;
  border-radius: 0px 0px 10px 10px;
}
.container .phm {
  position: relative;
}
.container .phm .car-group {
  left: 901px;
  top: 120px;
}
.container .phm .car-group .mask-left {
  background: linear-gradient(to right, #013967, rgba(255, 255, 255, 0));
}
.container .phm .title {
  position: absolute;
  left: 281px;
  top: 142px;
  color: #fff;
  line-height: 1;
}
.container .phm .title .t1 {
  font-family: H-bold;
  font-size: 40px;
}
.container .phm .title .t2 {
  margin-left: 47px;
  font-family: A-medium;
  font-size: 42px;
}
.container .phm .logo {
  position: absolute;
  top: 119px;
  left: 3670px;
  width: 530px;
  height: 84px;
}
.container .phm .head {
  position: absolute;
  top: 298px;
  width: 1980px;
  height: 146px;
  background-image: url("../images/phm/head1.png");
  background-size: 100% 100%;
  color: #fff;
  opacity: 0;
}
.container .phm .head1 {
  display: flex;
  left: 120px;
}
.container .phm .head1 .t1 {
  font-size: 112px;
  line-height: 1;
  font-family: H-medium;
}
.container .phm .head1 .t2 {
  margin-left: 139px;
  font-size: 57px;
  line-height: 59px;
  font-family: A-bold;
}
.container .phm .head2 {
  display: flex;
  left: 2220px;
}
.container .phm .head2 .t1 {
  font-size: 112px;
  line-height: 1;
  font-family: H-medium;
}
.container .phm .head2 .t2 {
  margin-left: 141px;
  font-size: 57px;
  line-height: 59px;
  font-family: A-bold;
}
.container .phm .block {
  position: absolute;
  overflow: hidden;
  height: 0;
}
.container .phm .block .inner .top {
  display: flex;
}
.container .phm .block .inner .top .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  color: #fff;
}
.container .phm .block .inner .top .right .t1 {
  line-height: 1;
  font-size: 56px;
  font-family: H-bold;
}
.container .phm .block .inner .top .right .t2 {
  line-height: 1;
  font-size: 48px;
  font-family: A-regular;
}
.container .phm .block .inner .text {
  margin-top: 39px;
}
.container .phm .system {
  left: 120px;
  top: 541px;
}
.container .phm .system .inner .top .icon {
  margin-right: 46px;
  width: 126px;
  height: 126px;
}
.container .phm .system .inner .top .right {
  height: 126px;
}
.container .phm .system .inner .text {
  width: 930px;
  height: 476px;
}
.container .phm .core {
  left: 120px;
  top: 1168px;
}
.container .phm .core .inner .top .icon {
  margin-right: 46px;
  width: 126px;
  height: 114px;
}
.container .phm .core .inner .top .right {
  height: 114px;
}
.container .phm .core .text {
  width: 930px;
  height: 432px;
}
.container .phm .hierarchy {
  left: 1170px;
  top: 540px;
}
.container .phm .hierarchy .inner .top .icon {
  margin-right: 46px;
  width: 119px;
  height: 132px;
}
.container .phm .hierarchy .inner .top .right {
  height: 132px;
}
.container .phm .hierarchy .inner .level {
  position: absolute;
  left: 99px;
  width: 733px;
  height: 162px;
}
.container .phm .hierarchy .inner .level1 {
  top: 210px;
}
.container .phm .hierarchy .inner .level2 {
  top: 349px;
}
.container .phm .hierarchy .inner .level3 {
  top: 488px;
}
.container .phm .hierarchy .inner .level4 {
  top: 627px;
}
.container .phm .hierarchy .inner .level5 {
  top: 766px;
}
.container .phm .hierarchy .inner .level6 {
  top: 905px;
}
.container .phm .hierarchy .text {
  width: 930px;
  height: 1092px;
}
.container .phm .solution {
  left: 2220px;
  top: 540px;
}
.container .phm .solution .inner .top .icon {
  margin-right: 46px;
  width: 118px;
  height: 128px;
}
.container .phm .solution .inner .top .right {
  height: 132px;
}
.container .phm .solution .inner .preview {
  position: absolute;
  left: 0;
  top: 170px;
  width: 60px;
  height: 60px;
}
.container .phm .solution .inner .green-line {
  position: absolute;
  left: 180px;
  top: 374px;
  width: 1173px;
  height: 148px;
}
.container .phm .solution .inner .red-line {
  position: absolute;
  left: 114px;
  top: 279px;
  width: 1239px;
  height: 243px;
}
.container .phm .solution .text {
  width: 1978px;
  height: 653px;
}
.container .phm .components {
  left: 2220px;
  top: 1419px;
}
.container .phm .components .inner .top .icon {
  margin-right: 46px;
  width: 125px;
  height: 113px;
}
.container .phm .components .inner .top .right {
  height: 113px;
}
.container .phm .components .text {
  width: 930px;
  height: 210px;
}
.container .phm .deployment {
  left: 3270px;
  top: 1419px;
}
.container .phm .deployment .inner .top .icon {
  margin-right: 46px;
  width: 122px;
  height: 122px;
}
.container .phm .deployment .inner .top .right {
  height: 122px;
}
.container .phm .deployment .text {
  width: 930px;
  height: 210px;
}
.container .phm .systemClass {
  animation: P-systemAni 1s forwards;
}
.container .phm .coreClass {
  animation: P-coreAni 1s forwards 0.5s;
}
.container .phm .hierarchyClass {
  animation: P-hierarchyAni 2.5s forwards;
}
.container .phm .componentsClass {
  animation: P-componentsAni 0.8s forwards 0.5s;
}
.container .phm .deploymentClass {
  animation: P-deploymentAni 0.8s forwards 0.5s;
}
.container .phm .solutionClass {
  animation: P-solutionAni 2s forwards;
}
.container .phm .redLineClass {
  animation: P-fadeAni 1.2s infinite alternate 2s;
}
.container .phm .greenLineClass {
  animation: P-fadeAni 1.2s infinite alternate 2s;
}
.container .phm .level1Class {
  animation: P-levelAni 3.5s infinite 4s;
}
.container .phm .level2Class {
  animation: P-levelAni 3.5s infinite 4.3s;
}
.container .phm .level3Class {
  animation: P-levelAni 3.5s infinite 4.6s;
}
.container .phm .level4Class {
  animation: P-levelAni 3.5s infinite 4.9s;
}
.container .phm .level5Class {
  animation: P-levelAni 3.5s infinite 5.2s;
}
.container .phm .level6Class {
  animation: P-levelAni 3.5s infinite 5.5s;
}
.container .phm .iconShowClass {
  animation: P-showAni 1.5s alternate infinite;
}
@keyframes P-systemAni {
  from {
    height: 0;
  }
  to {
    height: 643px;
  }
}
@keyframes P-coreAni {
  from {
    height: 0;
  }
  to {
    height: 593px;
  }
}
@keyframes P-hierarchyAni {
  from {
    height: 0;
  }
  to {
    height: 1280px;
  }
}
@keyframes P-componentsAni {
  from {
    height: 0;
  }
  to {
    height: 381px;
  }
}
@keyframes P-deploymentAni {
  from {
    height: 0;
  }
  to {
    height: 381px;
  }
}
@keyframes P-solutionAni {
  from {
    height: 0;
  }
  to {
    height: 830px;
  }
}
@keyframes P-levelAni {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes P-fadeAni {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.3;
  }
}
@keyframes P-showAni {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.door .car-group {
  left: 800px;
  top: 120px;
}
.door .car-group .mask-left {
  background: linear-gradient(to right, #15591d, rgba(255, 255, 255, 0));
}
.door .page1 {
  position: relative;
}
.door .page1 .left {
  position: absolute;
  left: 126px;
  top: 297px;
  overflow: hidden;
}
.door .page1 .left .inner .icon {
  position: absolute;
  right: 0;
  top: 513px;
  width: 147px;
  height: 147px;
}
.door .page1 .left .inner .efficient {
  position: absolute;
  left: 52px;
  top: 784px;
}
.door .page1 .left .inner .reliable {
  position: absolute;
  left: 65px;
  top: 969px;
}
.door .page1 .left .inner .simplify {
  position: absolute;
  left: 57px;
  top: 1153px;
}
.door .page1 .left .inner .t1 {
  font-size: 112px;
  color: #fff;
  font-family: H-medium;
  line-height: 1;
}
.door .page1 .left .inner .t2 {
  margin-top: 47px;
  line-height: 70px;
  font-size: 60px;
  font-family: A-medium;
  color: #fff;
  letter-spacing: -2px;
}
.door .page1 .left .inner .img {
  margin-top: 99px;
  width: 930px;
  height: 798px;
}
.door .page1 .center {
  position: absolute;
  left: 1169px;
  top: 298px;
  overflow: hidden;
}
.door .page1 .center .inner .img {
  width: 930px;
  height: 1502px;
}
.door .page1 .center .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 147px;
  height: 147px;
}
.door .page1 .center .inner .icon1 {
  position: absolute;
  left: 0;
  top: 253px;
}
.door .page1 .center .inner .icon2 {
  position: absolute;
  left: 0;
  top: 434px;
}
.door .page1 .center .inner .icon3 {
  position: absolute;
  left: 0;
  top: 632px;
}
.door .page1 .center .inner .icon4 {
  position: absolute;
  left: 0;
  top: 814px;
}
.door .page1 .center .inner .icon5 {
  position: absolute;
  left: 0;
  top: 1001px;
}
.door .page1 .center .inner .icon6 {
  position: absolute;
  left: 0;
  top: 1182px;
}
.door .page1 .center .inner .icon7 {
  position: absolute;
  left: 0;
  top: 1366px;
}
.door .page1 .right {
  position: absolute;
  left: 2219px;
  top: 298px;
  overflow: hidden;
}
.door .page1 .right .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 147px;
  height: 147px;
}
.door .page1 .right .inner .img {
  width: 1980px;
  height: 1502px;
}
.door .page1 .right .inner .arrow {
  position: absolute;
  overflow: hidden;
  height: 0;
}
.door .page1 .right .inner .arrow .img {
  width: 24px;
  height: 43px;
}
.door .page1 .right .inner .line {
  position: absolute;
  width: 558px;
}
.door .page1 .right .inner .line .left-line {
  stroke-dasharray: 279;
  stroke-dashoffset: 279;
}
.door .page1 .right .inner .line .right-line {
  stroke-dasharray: 279;
  stroke-dashoffset: 279;
}
.door .page1 .right .inner .line1 {
  left: 186px;
  top: 386px;
}
.door .page1 .right .inner .line1 .arrow1 {
  top: 0;
  left: 0;
}
.door .page1 .right .inner .line1 .arrow2 {
  top: 0;
  left: 175px;
}
.door .page1 .right .inner .line1 .arrow3 {
  top: 0;
  left: 360px;
}
.door .page1 .right .inner .line1 .arrow4 {
  top: 0;
  left: 535px;
}
.door .page1 .right .inner .line2 {
  left: 186px;
  top: 776px;
}
.door .page1 .right .inner .line2 .arrow1 {
  bottom: 41px;
  left: 0;
}
.door .page1 .right .inner .line2 .arrow2 {
  bottom: 41px;
  left: 175px;
}
.door .page1 .right .inner .line2 .arrow3 {
  bottom: 41px;
  left: 360px;
}
.door .page1 .right .inner .line2 .arrow4 {
  bottom: 41px;
  left: 535px;
}
.door .page1 .right .inner .line3 {
  left: 1236px;
}
.door .page1 .right .inner .line4 {
  left: 1236px;
}
.door .page1 .right .inner .single1 {
  left: 186px;
  bottom: 897px;
}
.door .page1 .right .inner .single2 {
  left: 1236px;
  bottom: 897px;
}
.door .page1 .right .inner .single3 {
  left: 980px;
  top: 1090px;
}
.door .page1 .right .inner .line5 {
  top: 907px;
  left: 463px;
  width: 1058px;
}
.door .page1 .right .inner .line5 .left-line {
  stroke-dasharray: 529;
  stroke-dashoffset: 529;
}
.door .page1 .right .inner .line5 .right-line {
  stroke-dasharray: 529;
  stroke-dashoffset: 529;
}
.door .page1 .right .inner .line5 .arrow1 {
  top: 0;
  left: 517px;
}
.door .page1 .right .inner .line5 .arrow2 {
  left: 0;
  bottom: 40px;
}
.door .page1 .right .inner .line5 .arrow3 {
  right: 0;
  bottom: 40px;
}
.door .page1 .rightLineClass {
  animation: D-doorDraw 4s linear forwards infinite 2s;
}
.door .page1 .leftLineClass {
  animation: D-doorDraw 4s linear forwards infinite 2s;
}
.door .page1 .arrowExpandClass {
  animation: D-arrowExpand 4s linear forwards infinite 2s;
}
.door .page1 .advantageClass {
  animation: D-advantage 2s linear forwards;
}
.door .page1 .canClass {
  animation: D-can 2s linear forwards;
}
.door .page1 .transmissionClass {
  animation: D-transmission 2s linear forwards;
}
.door .page3 {
  position: relative;
}
.door .page3 .text1 {
  position: absolute;
  left: 115px;
  top: 297px;
  width: 695px;
  height: 193px;
  opacity: 0;
}
.door .page3 .head {
  position: absolute;
  left: 848px;
  top: 298px;
  width: 3352px;
  height: 191px;
  opacity: 0;
}
.door .page3 .components {
  position: absolute;
  left: 120px;
  top: 574px;
  height: 0;
  overflow: hidden;
}
.door .page3 .components .inner {
  width: 930px;
  height: 1005px;
}
.door .page3 .components .inner .img {
  width: 100%;
  height: 100%;
}
.door .page3 .components .inner .unit {
  position: absolute;
  left: 79px;
  top: 158px;
}
.door .page3 .components .inner .collection {
  position: absolute;
  left: 85px;
  top: 391px;
}
.door .page3 .components .inner .transmission {
  position: absolute;
  left: 76px;
  top: 627px;
}
.door .page3 .components .inner .health {
  position: absolute;
  left: 81px;
  top: 856px;
}
.door .page3 .benefits {
  position: absolute;
  left: 1170px;
  top: 574px;
  height: 0;
  overflow: hidden;
}
.door .page3 .benefits .inner {
  width: 930px;
  height: 579px;
}
.door .page3 .benefits .inner .img {
  width: 100%;
  height: 100%;
}
.door .page3 .provided {
  position: absolute;
  left: 1170px;
  top: 1222px;
  height: 0;
  overflow: hidden;
}
.door .page3 .provided .inner {
  width: 930px;
  height: 578px;
}
.door .page3 .provided .inner .img {
  width: 100%;
  height: 100%;
}
.door .page3 .line {
  position: absolute;
  left: 2211px;
  top: 566px;
  height: 0;
  overflow: hidden;
}
.door .page3 .line .inner {
  width: 2020px;
  height: 1233px;
}
.door .page3 .line .inner .img {
  width: 100%;
  height: 100%;
}
.door .page3 .line .inner .svg-path {
  position: absolute;
  left: 878px;
  top: 686px;
  overflow: visible;
}
.door .page3 .line .inner .preview {
  position: absolute;
  left: 0;
  top: 0px;
  width: 60px;
  height: 60px;
}
.door .page3 .componentsClass {
  animation: D-components 1.5s linear forwards;
}
.door .page3 .benefitsClass {
  animation: D-benefits 1s linear forwards;
}
.door .page3 .providedClass {
  animation: D-provided 1s linear forwards 0.5s;
}
.door .page3 .lineClass {
  animation: D-line 2s linear forwards;
}
.door .page2 {
  position: relative;
}
.door .page2 .text1 {
  position: absolute;
  left: 115px;
  top: 297px;
  width: 695px;
  height: 193px;
  opacity: 0;
}
.door .page2 .head {
  position: absolute;
  left: 848px;
  top: 298px;
  width: 3352px;
  height: 191px;
  opacity: 0;
}
.door .page2 .challenge {
  position: absolute;
  left: 117px;
  top: 574px;
  height: 0;
  overflow: hidden;
}
.door .page2 .challenge .inner {
  width: 932px;
  height: 394px;
}
.door .page2 .challenge .inner .img {
  width: 100%;
  height: 100%;
}
.door .page2 .solution {
  position: absolute;
  left: 117px;
  top: 1039px;
  height: 0;
  overflow: hidden;
}
.door .page2 .solution .inner {
  width: 932px;
  height: 881px;
}
.door .page2 .solution .inner .img {
  width: 100%;
  height: 100%;
}
.door .page2 .benefits {
  position: absolute;
  left: 1169px;
  top: 574px;
  height: 0;
  overflow: hidden;
}
.door .page2 .benefits .inner {
  width: 930px;
  height: 501px;
}
.door .page2 .benefits .inner .img {
  width: 100%;
  height: 100%;
}
.door .page2 .provided {
  position: absolute;
  left: 1169px;
  top: 1155px;
  height: 0;
  overflow: hidden;
}
.door .page2 .provided .inner {
  width: 930px;
  height: 765px;
}
.door .page2 .provided .inner .img {
  width: 100%;
  height: 100%;
}
.door .page2 .line {
  position: absolute;
  left: 2216px;
  top: 560px;
  overflow: hidden;
}
.door .page2 .line .inner {
  width: 1994px;
  height: 1233px;
}
.door .page2 .line .inner .img {
  width: 100%;
  height: 100%;
}
.door .page2 .line .inner .qd {
  position: absolute;
  left: 0;
  top: 132px;
  width: 347px;
  height: auto;
}
.door .page2 .line .inner .preview {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 60px;
  height: 60px;
}
.door .page2 .line .inner .line2 {
  position: absolute;
  left: 1456px;
  top: 129px;
  width: 553px;
  height: 992px;
}
.door .page2 .line .inner .path-svg {
  position: absolute;
  left: 1570px;
  top: 185px;
  overflow: visible;
}
.door .page2 .challengeClass {
  animation: D-challenge 1s forwards;
}
.door .page2 .solutionClass {
  animation: D-solution 1.5s forwards 0.5s;
}
.door .page2 .benefitsClass {
  animation: D-benefits2 1.2s forwards;
}
.door .page2 .providedClass {
  animation: D-provided2 1.2s forwards 0.5s;
}
.door .page2 .lineClass {
  animation: D-line2 2s forwards;
}
.door .iconShowClass {
  animation: D-showAni 1.5s alternate infinite;
}
@keyframes D-arrowExpand {
  0% {
    height: 0;
  }
  14% {
    height: 0;
  }
  24% {
    height: 43px;
  }
  100% {
    height: 43px;
  }
}
@keyframes D-doorDraw {
  16% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes D-advantage {
  from {
    height: 0;
  }
  to {
    height: 1311px;
  }
}
@keyframes D-can {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
@keyframes D-transmission {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
@keyframes D-components {
  from {
    height: 0;
  }
  to {
    height: 1005px;
  }
}
@keyframes D-benefits {
  from {
    height: 0;
  }
  to {
    height: 579px;
  }
}
@keyframes D-provided {
  from {
    height: 0;
  }
  to {
    height: 578px;
  }
}
@keyframes D-line {
  from {
    height: 0;
  }
  to {
    height: 1236px;
  }
}
@keyframes D-challenge {
  from {
    height: 0;
  }
  to {
    height: 394px;
  }
}
@keyframes D-solution {
  from {
    height: 0;
  }
  to {
    height: 881px;
  }
}
@keyframes D-benefits2 {
  from {
    height: 0;
  }
  to {
    height: 501px;
  }
}
@keyframes D-provided2 {
  from {
    height: 0;
  }
  to {
    height: 765px;
  }
}
@keyframes D-line2 {
  from {
    height: 0;
  }
  to {
    height: 1327px;
  }
}
@keyframes D-showAni {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.preview-box {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 4320px;
  height: 1920px;
  transform-origin: left top;
  transition: opacity 0.3s;
  z-index: 100;
}
.preview-box .img {
  position: absolute;
  left: 120px;
  top: 298px;
  width: 4080px;
  height: 1502px;
  transform-origin: left top;
}
.preview-box .close {
  position: absolute;
  left: 4100px;
  top: 1700px;
  width: 100px;
  height: 100px;
}
.preview-box .close .img {
  position: static;
  width: 100%;
  height: 100%;
}
.preview-box .video {
  position: absolute;
  left: 825px;
  top: 298px;
  width: 2671px;
  height: 1502px;
  box-sizing: border-box;
}
.hvac .car-group .mask-left {
  background: linear-gradient(to right, #005b58, rgba(255, 255, 255, 0));
}
.hvac .page1 {
  position: relative;
}
.hvac .page1 .arrow {
  position: absolute;
  width: 69px;
  height: 38px;
  opacity: 0;
}
.hvac .page1 .text {
  position: absolute;
  left: 115px;
  top: 297px;
}
.hvac .page1 .text .inner {
  width: 694px;
  height: 414px;
}
.hvac .page1 .text .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page1 .advantage {
  position: absolute;
  left: 120px;
  top: 810px;
  overflow: hidden;
}
.hvac .page1 .advantage .inner {
  width: 930px;
  height: 800px;
}
.hvac .page1 .advantage .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page1 .advantage .inner .icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 147px;
  height: 147px;
}
.hvac .page1 .advantage .inner .monitor {
  position: absolute;
  left: 56px;
  top: 275px;
}
.hvac .page1 .advantage .inner .visual {
  position: absolute;
  left: 56px;
  top: 460px;
}
.hvac .page1 .advantage .inner .timeliness {
  position: absolute;
  left: 54px;
  top: 646px;
}
.hvac .page1 .overview {
  position: absolute;
  left: 1170px;
  top: 298px;
  overflow: hidden;
}
.hvac .page1 .overview .inner {
  width: 930px;
  height: 556px;
}
.hvac .page1 .overview .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page1 .overview .inner .icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 147px;
  height: 147px;
}
.hvac .page1 .components {
  position: absolute;
  left: 1170px;
  top: 925px;
  overflow: hidden;
}
.hvac .page1 .components .inner {
  width: 930px;
  height: 875px;
}
.hvac .page1 .components .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page1 .components .inner .icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 147px;
  height: 147px;
}
.hvac .page1 .components .inner .box1 {
  position: absolute;
  left: 0;
  top: 233px;
}
.hvac .page1 .components .inner .box2 {
  position: absolute;
  left: 0;
  top: 362px;
}
.hvac .page1 .components .inner .box3 {
  position: absolute;
  left: 0;
  top: 492px;
}
.hvac .page1 .components .inner .box4 {
  position: absolute;
  left: 0;
  top: 621px;
}
.hvac .page1 .components .inner .box5 {
  position: absolute;
  left: 0;
  top: 751px;
}
.hvac .page1 .architecture {
  position: absolute;
  left: 2220px;
  top: 298px;
  overflow: hidden;
}
.hvac .page1 .architecture .inner {
  width: 1982px;
  height: 1502px;
}
.hvac .page1 .architecture .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page1 .architecture .inner .icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 147px;
  height: 147px;
}
.hvac .page1 .architecture .inner .collection {
  position: absolute;
  top: 296px;
  left: 152px;
  width: 96px;
  height: 96px;
}
.hvac .page1 .architecture .inner .transmission {
  position: absolute;
  top: 295px;
  left: 681px;
  width: 94px;
  height: 97px;
}
.hvac .page1 .architecture .inner .model {
  position: absolute;
  top: 294px;
  left: 1207px;
  width: 86px;
  height: 99px;
}
.hvac .page1 .architecture .inner .visualization {
  position: absolute;
  top: 300px;
  left: 1728px;
  width: 100px;
  height: 87px;
}
.hvac .page1 .architecture .inner .health {
  position: absolute;
  top: 1104px;
  left: 89px;
  width: 86px;
  height: 91px;
}
.hvac .page1 .architecture .inner .warning {
  position: absolute;
  top: 1104px;
  left: 737px;
  width: 97px;
  height: 97px;
}
.hvac .page1 .architecture .inner .life {
  position: absolute;
  top: 1112px;
  left: 1385px;
  width: 93px;
  height: 82px;
}
.hvac .page1 .architecture .inner .arrow1 {
  position: absolute;
  left: 431px;
  top: 585px;
}
.hvac .page1 .architecture .inner .arrow2 {
  position: absolute;
  left: 957px;
  top: 585px;
}
.hvac .page1 .architecture .inner .arrow3 {
  position: absolute;
  left: 1481px;
  top: 585px;
}
.hvac .page2 .text {
  position: absolute;
  left: 115px;
  top: 297px;
}
.hvac .page2 .text .inner {
  width: 693px;
  height: 414px;
}
.hvac .page2 .text .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page2 .text2 {
  position: absolute;
  left: 119px;
  top: 810px;
  height: 0;
  overflow: hidden;
}
.hvac .page2 .text2 .inner {
  width: 930px;
  height: 800px;
}
.hvac .page2 .text2 .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page2 .text2 .inner .icon1 {
  position: absolute;
  left: 78px;
  top: 271px;
  width: 82px;
  height: 80px;
}
.hvac .page2 .text2 .inner .icon2 {
  position: absolute;
  left: 73px;
  top: 453px;
  width: 92px;
  height: 80px;
}
.hvac .page2 .text2 .inner .icon3 {
  position: absolute;
  left: 75px;
  top: 617px;
  width: 89px;
  height: 90px;
}
.hvac .page2 .fault {
  position: absolute;
  left: 1169px;
  top: 298px;
  overflow: hidden;
}
.hvac .page2 .fault .inner {
  width: 930px;
  height: 1502px;
}
.hvac .page2 .fault .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page2 .fault .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 147px;
  height: 147px;
}
.hvac .page2 .fault .inner .alert1 {
  position: absolute;
  left: 0;
  top: 301px;
}
.hvac .page2 .fault .inner .alert2 {
  position: absolute;
  left: 0;
  top: 562px;
}
.hvac .page2 .fault .inner .alert3 {
  position: absolute;
  left: 0;
  top: 823px;
}
.hvac .page2 .fault .inner .alert4 {
  position: absolute;
  left: 0;
  top: 1084px;
}
.hvac .page2 .fault .inner .alert5 {
  position: absolute;
  left: 0;
  top: 1345px;
}
.hvac .page2 .prediction {
  position: absolute;
  left: 2219px;
  top: 298px;
  overflow: hidden;
}
.hvac .page2 .prediction .inner {
  width: 930px;
  height: 1502px;
}
.hvac .page2 .prediction .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page2 .prediction .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 147px;
  height: 147px;
}
.hvac .page2 .prediction .inner .light1 {
  position: absolute;
  left: 0;
  top: 301px;
}
.hvac .page2 .prediction .inner .light2 {
  position: absolute;
  left: 0;
  top: 562px;
}
.hvac .page2 .prediction .inner .light3 {
  position: absolute;
  left: 0;
  top: 823px;
}
.hvac .page2 .prediction .inner .light4 {
  position: absolute;
  left: 0;
  top: 1084px;
}
.hvac .page2 .prediction .inner .light5 {
  position: absolute;
  left: 0;
  top: 1345px;
}
.hvac .page2 .health {
  position: absolute;
  left: 3269px;
  top: 298px;
  overflow: hidden;
}
.hvac .page2 .health .inner {
  width: 930px;
  height: 1502px;
}
.hvac .page2 .health .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page2 .health .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 147px;
  height: 147px;
}
.hvac .page2 .health .inner .heart1 {
  position: absolute;
  left: 461px;
  top: 239px;
}
.hvac .page2 .health .inner .heart2 {
  position: absolute;
  left: 461px;
  top: 379px;
}
.hvac .page2 .health .inner .heart3 {
  position: absolute;
  left: 461px;
  top: 519px;
}
.hvac .page2 .health .inner .heart4 {
  position: absolute;
  left: 461px;
  top: 658px;
}
.hvac .page2 .health .inner .heart5 {
  position: absolute;
  left: 461px;
  top: 798px;
}
.hvac .page2 .health .inner .heart6 {
  position: absolute;
  left: 461px;
  top: 938px;
}
.hvac .page2 .health .inner .heart7 {
  position: absolute;
  left: 461px;
  top: 1078px;
}
.hvac .page2 .health .inner .arrow1 {
  position: absolute;
  left: 188px;
  top: 1317px;
}
.hvac .page2 .health .inner .arrow2 {
  position: absolute;
  left: 439px;
  top: 1317px;
}
.hvac .page2 .health .inner .arrow3 {
  position: absolute;
  left: 689px;
  top: 1317px;
}
.hvac .page3 .text {
  position: absolute;
  left: 119px;
  top: 297px;
}
.hvac .page3 .text .inner {
  width: 890px;
  height: 330px;
}
.hvac .page3 .text .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page3 .text2 {
  position: absolute;
  left: 120px;
  top: 712px;
}
.hvac .page3 .text2 .inner {
  width: 930px;
  height: 220px;
}
.hvac .page3 .text2 .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page3 .text2 .inner .icon {
  position: absolute;
  left: 49px;
  top: 76px;
}
.hvac .page3 .value {
  position: absolute;
  left: 120px;
  top: 1066px;
  height: 0;
  overflow: hidden;
}
.hvac .page3 .value .inner {
  width: 930px;
  height: 562px;
}
.hvac .page3 .value .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page3 .value .inner .icon {
  position: absolute;
  right: 0px;
  top: 0px;
}
.hvac .page3 .value .inner .reduce {
  position: absolute;
  left: 0;
  top: 289px;
}
.hvac .page3 .value .inner .improve {
  position: absolute;
  left: 490px;
  top: 266px;
}
.hvac .page3 .value .inner .extend {
  position: absolute;
  left: 0px;
  top: 416px;
}
.hvac .page3 .value .inner .optimize {
  position: absolute;
  left: 486px;
  top: 416px;
}
.hvac .page3 .table {
  position: absolute;
  left: 1169px;
  top: 298px;
  overflow: hidden;
}
.hvac .page3 .table .inner {
  width: 931px;
  height: 1502px;
}
.hvac .page3 .table .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page3 .highlight {
  position: absolute;
  left: 2202px;
  top: 298px;
  overflow: hidden;
}
.hvac .page3 .highlight .inner {
  width: 2016px;
  height: 1502px;
}
.hvac .page3 .highlight .inner .img {
  width: 100%;
  height: 100%;
}
.hvac .page3 .highlight .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 147px;
  height: 147px;
}
.hvac .page3 .highlight .inner .preview {
  position: absolute;
  left: 119px;
  top: 466px;
  height: 60px;
  width: 60px;
}
.hvac .page3 .highlight .inner .screen {
  position: absolute;
  left: 83px;
  top: 294px;
}
.hvac .page3 .highlight .inner .warning {
  position: absolute;
  left: 1083px;
  top: 289px;
}
.hvac .iconShowClass {
  animation: H-showAni 1.5s alternate infinite;
}
.hvac .advantageClass {
  animation: H-advantage 3s forwards;
}
.hvac .overviewClass {
  animation: H-overview 3s forwards;
}
.hvac .componentsClass {
  animation: H-components 3s forwards;
}
.hvac .architectureClass {
  animation: H-architecture 3s forwards;
}
.hvac .arrow1Class {
  animation: H-arrow 2s infinite;
}
.hvac .arrow2Class {
  animation: H-arrow 2s infinite 0.5s;
}
.hvac .arrow3Class {
  animation: H-arrow 2s infinite 1s;
}
.hvac .text2Class {
  animation: text2Ani 1s forwards 0.5s;
}
.hvac .faultClass {
  animation: faultAni 2s forwards;
}
.hvac .predictionClass {
  animation: predictionAni 2s forwards;
}
.hvac .healthClass {
  animation: healthAni 2s forwards;
}
.hvac .valueClass {
  animation: valueAni 1s forwards 0.5s;
}
.hvac .tableClass {
  animation: tableAni 2s forwards;
}
.hvac .highlightClass {
  animation: highlightAni 2s forwards;
}
@keyframes H-showAni {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes H-advantage {
  from {
    height: 0;
  }
  to {
    height: 800px;
  }
}
@keyframes H-overview {
  from {
    height: 0;
  }
  to {
    height: 556px;
  }
}
@keyframes H-components {
  from {
    height: 0;
  }
  to {
    height: 875px;
  }
}
@keyframes H-architecture {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
@keyframes H-arrow {
  0% {
    opacity: 0.4;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
@keyframes text2Ani {
  from {
    height: 0;
  }
  to {
    height: 800px;
  }
}
@keyframes faultAni {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
@keyframes predictionAni {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
@keyframes healthAni {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
@keyframes valueAni {
  from {
    height: 0;
  }
  to {
    height: 562px;
  }
}
@keyframes tableAni {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
@keyframes highlightAni {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
.brake .car-group {
  left: 800px;
  top: 120px;
}
.brake .car-group .mask-left {
  background: linear-gradient(to right, #554200, rgba(255, 255, 255, 0));
}
.brake .page1 {
  position: relative;
}
.brake .page1 .text1 {
  position: absolute;
  left: 125px;
  top: 297px;
  width: 863px;
  height: 330px;
}
.brake .page1 .train {
  position: absolute;
  left: 119px;
  top: 703px;
  overflow: hidden;
}
.brake .page1 .train .inner {
  width: 930px;
  height: 1217px;
}
.brake .page1 .train .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page1 .train .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 147px;
  height: 147px;
}
.brake .page1 .equipment {
  position: absolute;
  left: 3269px;
  top: 298px;
  overflow: hidden;
}
.brake .page1 .equipment .inner {
  width: 930px;
  height: 1502px;
}
.brake .page1 .equipment .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page1 .equipment .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 147px;
  height: 147px;
}
.brake .page1 .equipment .inner .light1 {
  position: absolute;
  left: 50px;
  top: 1002px;
}
.brake .page1 .equipment .inner .light1 .img {
  width: 399px;
  height: 436px;
}
.brake .page1 .equipment .inner .light1 #path {
  opacity: 0;
}
.brake .page1 .equipment .inner .light2 {
  position: absolute;
  left: 458px;
  top: 1002px;
}
.brake .page1 .equipment .inner .light2 .img {
  width: 442px;
  height: 438px;
}
.brake .page1 .equipment .inner .light2 #path {
  opacity: 0;
}
.brake .page1 .air {
  position: absolute;
  left: 1170px;
  top: 298px;
  overflow: hidden;
}
.brake .page1 .air .inner {
  width: 930px;
  height: 1502px;
}
.brake .page1 .air .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page1 .air .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 147px;
  height: 147px;
}
.brake .page1 .air .inner .light {
  position: absolute;
  left: 68px;
  top: 973px;
}
.brake .page1 .air .inner .light .img {
  width: 815px;
  height: 507px;
}
.brake .page1 .air .inner .light #path {
  opacity: 0;
}
.brake .page1 .control {
  position: absolute;
  left: 2220px;
  top: 298px;
  overflow: hidden;
}
.brake .page1 .control .inner {
  width: 930px;
  height: 1502px;
}
.brake .page1 .control .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page1 .control .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 147px;
  height: 147px;
}
.brake .page1 .control .inner .light1 {
  position: absolute;
  left: 33px;
  top: 997px;
}
.brake .page1 .control .inner .light1 .img {
  width: 369px;
  height: 463px;
}
.brake .page1 .control .inner .light1 #path {
  opacity: 0;
}
.brake .page1 .control .inner .light2 {
  position: absolute;
  left: 400px;
  top: 1002px;
}
.brake .page1 .control .inner .light2 .img {
  width: 495px;
  height: 343px;
}
.brake .page1 .control .inner .light2 #path {
  opacity: 0;
}
.brake .page1 .control .inner .light3 {
  position: absolute;
  left: 405px;
  top: 1313px;
}
.brake .page1 .control .inner .light3 .img {
  width: 475px;
  height: 141px;
}
.brake .page1 .control .inner .light3 #path {
  opacity: 0;
}
.brake .page1 .lightClass {
  animation: B-lightAni 1.5s alternate infinite;
}
.brake .page1 .trainClass {
  animation: B-trainAni 2s forwards;
}
.brake .page1 .equipmentClass {
  animation: B-equipmentAni 2s forwards;
}
.brake .page1 .airClass {
  animation: B-airAni 2s forwards;
}
.brake .page1 .controlClass {
  animation: B-controlAni 2s forwards;
}
.brake .page2 {
  position: relative;
}
.brake .page2 .text1 {
  position: absolute;
  left: 115px;
  top: 297px;
}
.brake .page2 .text2 {
  position: absolute;
  left: 120px;
  top: 787px;
  overflow: hidden;
}
.brake .page2 .text2 .inner {
  width: 930px;
  height: 739px;
}
.brake .page2 .text2 .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page2 .core {
  position: absolute;
  left: 1169px;
  top: 298px;
  overflow: hidden;
}
.brake .page2 .core .inner {
  width: 930px;
  height: 1502px;
}
.brake .page2 .core .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page2 .core .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
}
.brake .page2 .technical {
  position: absolute;
  left: 2219px;
  top: 298px;
  height: 0;
  overflow: hidden;
}
.brake .page2 .technical .inner {
  width: 930px;
  height: 922px;
}
.brake .page2 .technical .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page2 .technical .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
}
.brake .page2 .application {
  position: absolute;
  left: 2219px;
  top: 1308px;
  height: 0;
  overflow: hidden;
}
.brake .page2 .application .inner {
  width: 930px;
  height: 492px;
}
.brake .page2 .application .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page2 .application .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
}
.brake .page2 .application .inner .reduce {
  position: absolute;
  left: 0;
  top: 263px;
}
.brake .page2 .application .inner .improve {
  position: absolute;
  left: 0;
  top: 367px;
}
.brake .page2 .application .inner .extend {
  position: absolute;
  left: 516px;
  top: 241px;
}
.brake .page2 .application .inner .simplify {
  position: absolute;
  left: 523px;
  top: 374px;
}
.brake .page2 .unit {
  position: absolute;
  left: 3270px;
  top: 298px;
  height: 0;
  overflow: hidden;
}
.brake .page2 .unit .inner {
  width: 930px;
  height: 711px;
}
.brake .page2 .unit .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page2 .unit .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
}
.brake .page2 .unit .inner .preview {
  position: absolute;
  left: 0;
  top: 199px;
  width: 60px;
  height: 60px;
}
.brake .page2 .architecture {
  position: absolute;
  left: 3270px;
  top: 1089px;
  height: 0;
  overflow: hidden;
}
.brake .page2 .architecture .inner {
  width: 930px;
  height: 711px;
}
.brake .page2 .architecture .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page2 .architecture .inner .icon {
  position: absolute;
  right: 0;
  top: 0;
}
.brake .page2 .architecture .inner .preview {
  position: absolute;
  left: 0;
  top: 199px;
  width: 60px;
  height: 60px;
}
.brake .page2 .text2Class {
  animation: B-text2Ani 2s forwards;
}
.brake .page2 .coreClass {
  animation: B-coreAni 2s forwards;
}
.brake .page2 .technicalClass {
  animation: B-technicalAni 1s forwards;
}
.brake .page2 .applicationClass {
  animation: B-applicationAni 0.8s forwards 0.5s;
}
.brake .page2 .unitClass {
  animation: B-unitAni 2s forwards;
}
.brake .page2 .architectureClass {
  animation: B-architectureAni 2s forwards;
}
.brake .page3 {
  position: relative;
}
.brake .page3 .head {
  position: absolute;
  left: 115px;
  top: 297px;
  width: 3128px;
  height: 193px;
}
.brake .page3 .challenge {
  position: absolute;
  left: 119px;
  top: 574px;
  overflow: hidden;
}
.brake .page3 .challenge .inner {
  width: 930px;
  height: 195px;
}
.brake .page3 .challenge .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page3 .solution {
  position: absolute;
  left: 119px;
  top: 845px;
  height: 0;
  overflow: hidden;
}
.brake .page3 .solution .inner {
  width: 930px;
  height: 1075px;
}
.brake .page3 .solution .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page3 .benefits {
  position: absolute;
  left: 1169px;
  top: 572px;
  height: 0;
  overflow: hidden;
}
.brake .page3 .benefits .inner {
  width: 930px;
  height: 593px;
}
.brake .page3 .benefits .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page3 .provided {
  position: absolute;
  left: 1169px;
  top: 1239px;
  height: 0;
  overflow: hidden;
}
.brake .page3 .provided .inner {
  width: 930px;
  height: 681px;
}
.brake .page3 .provided .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page3 .data {
  position: absolute;
  left: 2219px;
  top: 572px;
  height: 0;
  overflow: hidden;
}
.brake .page3 .data .inner {
  width: 930px;
  height: 1227px;
}
.brake .page3 .data .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page3 .data .inner .preview {
  position: absolute;
  left: 858px;
  top: 1155px;
  width: 60px;
  height: 60px;
}
.brake .page3 .screen {
  position: absolute;
  left: 3270px;
  top: 298px;
  padding: 0 36px;
  width: 930px;
  height: 1502px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../images/brake/page3/screen.png");
}
.brake .page3 .screen .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.brake .page3 .screen .inner .img {
  width: 100%;
  height: 1423px;
}
.brake .page3 .screen .inner .preview1 {
  position: absolute;
  left: 39px;
  top: 38px;
  width: 60px;
  height: 60px;
}
.brake .page3 .screen .inner .preview2 {
  position: absolute;
  left: 39px;
  top: 534px;
  width: 60px;
  height: 60px;
}
.brake .page3 .screen .inner .preview3 {
  position: absolute;
  left: 39px;
  top: 1015px;
  width: 60px;
  height: 60px;
}
.brake .page3 .challengeClass {
  animation: B-challengeAni 0.8s forwards;
}
.brake .page3 .solutionClass {
  animation: B-solutionAni 1.2s forwards 0.5s;
}
.brake .page3 .benefitsClass {
  animation: B-benefitsAni 1s forwards;
}
.brake .page3 .providedClass {
  animation: B-providedAni 1s forwards 0.5s;
}
.brake .page3 .dataClass {
  animation: B-dataAni 2s forwards;
}
.brake .page3 .screenClass {
  animation: B-screenAni 1.5s forwards;
}
.brake .page4 {
  position: relative;
}
.brake .page4 .head {
  position: absolute;
  left: 115px;
  top: 297px;
  width: 3128px;
  height: 193px;
}
.brake .page4 .challenge {
  position: absolute;
  left: 119px;
  top: 574px;
  overflow: hidden;
}
.brake .page4 .challenge .inner {
  width: 930px;
  height: 195px;
}
.brake .page4 .challenge .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page4 .solution {
  position: absolute;
  left: 119px;
  top: 845px;
  height: 0;
  overflow: hidden;
}
.brake .page4 .solution .inner {
  width: 930px;
  height: 1075px;
}
.brake .page4 .solution .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page4 .benefits {
  position: absolute;
  left: 1169px;
  top: 572px;
  height: 0;
  overflow: hidden;
}
.brake .page4 .benefits .inner {
  width: 930px;
  height: 441px;
}
.brake .page4 .benefits .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page4 .provided {
  position: absolute;
  left: 1169px;
  top: 844px;
  height: 0;
  overflow: hidden;
}
.brake .page4 .provided .inner {
  width: 934px;
  height: 1076px;
}
.brake .page4 .provided .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page4 .data {
  position: absolute;
  left: 2219px;
  top: 572px;
  height: 0;
  overflow: hidden;
}
.brake .page4 .data .inner {
  width: 930px;
  height: 1227px;
}
.brake .page4 .data .inner .img {
  width: 100%;
  height: 100%;
}
.brake .page4 .data .inner .preview {
  position: absolute;
  left: 858px;
  top: 1155px;
  width: 60px;
  height: 60px;
}
.brake .page4 .screen {
  position: absolute;
  left: 3270px;
  top: 298px;
  padding: 0 129px;
  width: 930px;
  height: 1502px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../images/brake/page4/screen.png");
  box-sizing: border-box;
}
.brake .page4 .screen .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.brake .page4 .screen .inner .img {
  width: 100%;
  height: 1423px;
}
.brake .page4 .screen .inner .preview1 {
  position: absolute;
  left: 128px;
  top: 38px;
  width: 60px;
  height: 60px;
}
.brake .page4 .screen .inner .preview2 {
  position: absolute;
  left: 128px;
  top: 379px;
  width: 60px;
  height: 60px;
}
.brake .page4 .screen .inner .preview3 {
  position: absolute;
  left: 128px;
  top: 718px;
  width: 60px;
  height: 60px;
}
.brake .page4 .screen .inner .preview4 {
  position: absolute;
  left: 128px;
  top: 1079px;
  width: 60px;
  height: 60px;
}
.brake .page4 .challengeClass {
  animation: B-challengeAni 0.8s forwards;
}
.brake .page4 .solutionClass {
  animation: B-solutionAni 1.2s forwards 0.5s;
}
.brake .page4 .benefitsClass {
  animation: B-benefits2Ani 0.8s forwards;
}
.brake .page4 .providedClass {
  animation: B-provided2Ani 1.4s forwards 0.5s;
}
.brake .page4 .dataClass {
  animation: B-dataAni 2s forwards;
}
.brake .page4 .screenClass {
  animation: B-screenAni 1.5s forwards;
}
.brake .iconShowClass {
  animation: B-showAni 1.5s alternate infinite;
}
@keyframes B-showAni {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes B-lightAni {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes B-trainAni {
  from {
    height: 0;
  }
  to {
    height: 1217px;
  }
}
@keyframes B-equipmentAni {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
@keyframes B-airAni {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
@keyframes B-controlAni {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
@keyframes B-text2Ani {
  from {
    height: 0;
  }
  to {
    height: 739px;
  }
}
@keyframes B-coreAni {
  from {
    height: 0;
  }
  to {
    height: 1502px;
  }
}
@keyframes B-technicalAni {
  from {
    height: 0;
  }
  to {
    height: 922px;
  }
}
@keyframes B-applicationAni {
  from {
    height: 0;
  }
  to {
    height: 492px;
  }
}
@keyframes B-unitAni {
  from {
    height: 0;
  }
  to {
    height: 711px;
  }
}
@keyframes B-architectureAni {
  from {
    height: 0;
  }
  to {
    height: 711px;
  }
}
@keyframes B-challengeAni {
  from {
    height: 0;
  }
  to {
    height: 195px;
  }
}
@keyframes B-solutionAni {
  from {
    height: 0;
  }
  to {
    height: 1075px;
  }
}
@keyframes B-benefitsAni {
  from {
    height: 0;
  }
  to {
    height: 593px;
  }
}
@keyframes B-providedAni {
  from {
    height: 0;
  }
  to {
    height: 681px;
  }
}
@keyframes B-dataAni {
  from {
    height: 0;
  }
  to {
    height: 1227px;
  }
}
@keyframes B-benefits2Ani {
  from {
    height: 0;
  }
  to {
    height: 441px;
  }
}
@keyframes B-provided2Ani {
  from {
    height: 0;
  }
  to {
    height: 1076px;
  }
}
@keyframes B-screenAni {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.fullscreen-video {
  display: none;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 4320px;
  height: 1920px;
  transform-origin: left top;
  transition: opacity 0.3s;
  z-index: 101;
}
.fullscreen-video .video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.fullscreen-video .close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 100px;
  top: 100px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: black;
}
.fullscreen-video .close .img {
  width: 50px;
  height: 50px;
}
.settings {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  align-items: center;
  justify-content: center;
  width: 4320px;
  height: 1920px;
  transform-origin: left top;
  z-index: 100;
}
.settings .content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 1500px;
  height: 400px;
  background-color: #fff;
  border-radius: 50px;
}
.settings .content .text {
  font-size: 50px;
  color: #333;
}
.settings .content .num {
  width: 1000px;
  height: 70px;
  line-height: 70px;
  font-size: 50px;
}
.settings .content .long-num {
  width: 1000px;
  height: 70px;
  line-height: 70px;
  font-size: 50px;
}
.settings .content .close {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 50px;
}
.settings .content .close .img {
  width: 50px;
  height: 50px;
}
.car-group {
  position: absolute;
  left: 800px;
  top: 120px;
  padding: 0 20px;
  height: 84px;
  width: 2860px;
  box-sizing: border-box;
}
.car-group .inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.car-group .inner .car {
  width: 1539px;
  height: 80px;
  mix-blend-mode: screen;
}
.car-group .mask-left {
  position: absolute;
  left: 0px;
  top: 0;
  width: 200px;
  height: 100%;
  background: linear-gradient(to right, #15591d, rgba(255, 255, 255, 0));
}
.title {
  position: absolute;
  left: 281px;
  top: 142px;
  color: #fff;
  line-height: 1;
}
.title .t1 {
  font-family: H-bold;
  font-size: 40px;
}
.title .t2 {
  margin-left: 47px;
  font-family: A-medium;
  font-size: 42px;
}
.logo {
  position: absolute;
  top: 119px;
  left: 3670px;
  width: 530px;
  height: 84px;
}
.oper-group {
  display: flex;
  align-items: center;
  position: absolute;
  left: 120px;
  top: 1707px;
}
.oper-group .text {
  position: static !important;
  margin-left: 20px;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
}
.oper-group .hand-horizontal {
  position: relative;
  display: flex;
  align-items: center;
}
.oper-group .hand-horizontal .icon {
  position: relative;
  width: 76px;
  height: 86px;
}
.oper-group .hand-horizontal .img {
  width: 100%;
}
.oper-group .hand-horizontal .arrow1 {
  position: absolute;
  left: 0px;
  top: 0;
  width: 30px;
}
.oper-group .hand-horizontal .arrow2 {
  position: absolute;
  right: 0px;
  top: 0;
  width: 30px;
}
.oper-group .hand-vertical {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 60px;
}
.oper-group .hand-vertical .icon {
  width: 76px;
  height: 93px;
}
.oper-group .hand-vertical .img {
  width: 100%;
}
.oper-group .hand-vertical .arrow1 {
  position: absolute;
  left: -10px;
  top: 10px;
  width: 25px;
}
.oper-group .hand-vertical .arrow2 {
  position: absolute;
  left: -10px;
  bottom: 10px;
  width: 25px;
}
.oper-group .hand-long {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 60px;
}
.oper-group .hand-long .icon {
  width: 76px;
  height: 93px;
}
.oper-group .hand-long .circle {
  position: absolute;
  left: 8px;
  top: -14px;
  width: 60px;
}
.oper-group .hand-long .img {
  width: 100%;
}