.bar{
  position: fixed;
  width: 10px;
  height: 200px;
  background: #f1f1f1;
  border-radius: 5px;
  top: 50%;
  right: 50px;
  margin-top: -100px;
}
.bar .active{
  width: 10px;
  height: 50px;
  border-radius: 5px;
  background: #F4243D;
}

/* 功能 */
.function {
  height: 100vh;
  background: url(../imgs/point.png),
  url(../imgs/roll.png) 59px 0 no-repeat;
  overflow: hidden;
  position: relative;
}
.function .content {
  /* height: calc(100vh - 100px); */
  overflow: hidden;
  width: 1041px;
  margin: 0 auto;
 
}
.function .content .phone{
  width: 310px;
  height: 640px;
  background: url(../imgs/phone1.png);
  background-size: cover;
  margin-right: 154px;
  margin-top: 150px;
  float: left;
}
.function .content .intro{
  float: left;
  width: 577px;
  margin-top: 250px;
}
.function .content .intro h1{
  color: #00DDDA;
  font-size: 48px;
  line-height: 67px;
}
.function .content .intro p{
  color: #484848;
  font-size: 24px;
  line-height: 40px;
}
/* .function .bar{
  width: 200px;
  height: 10px;
  border-radius: 10px;
  background: #fff;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translate(-100px, 0);
}
.function .bar .active{
  width: 50px;
  height: 10px;
  border-radius: 10px;
  background: #F4243D;
} */

.function .content .phone2 {
  background: url(../imgs/phone2.png);
}
.function .bar .active2{
  width: 100px;
}
.function .content .phone3 {
  background: url(../imgs/phone3.png);
}
.function .bar .active3 {
  width: 150px;
}
.function .content .phone4 {
  background: url(../imgs/phone4.png);
}
.function .bar .active4 {
  width: 200px;
}