* {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
body {
  background-color: #fff;
  font-family: 'Source Sans Pro', sans-serif;}
.main {
  width: 350px;
}
#index-content {
  margin-top: 100px;
}
#index-content .content-prag .title {
  margin-top: 20px;
  font-size: 28px;
  color: #ff647c;
}
#active {
  color: #ff647c;
}
.footer-lists {
  width: 350px;
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
}
ul {
  display: flex;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
}
ul li {
  font-size: 18px;
  list-style: none;
  line-height: 50px;
}
ul li .dotlistnum {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.footer-lists ul .dotlist {
  margin-top: -13px;
}
i {
  color: gray;
}
.fa-custamize {
  font-size: 3px;
  padding: 1px;
}
ul li a {
  display: block;
  text-decoration: none;
  color: black;
  font-weight: 600;
  border-radius: 50%;
}
ul li .dotlistnum:hover a,
ul li .dotlistnum .active a {
  background: #333;
  color: #fff;
}
.content-prag2 {
  padding: 10px;
}
#index-content .content-prag2 .title2 {
  margin-top: 20px;
  font-size: 25px;
  color: black;
  font-weight: 500;
}
.content-prag2 .title2 .title4 {
  font-size: 20px;
}
.content-prag2 .sum2 {
  font-size: 17px;
  margin-top: 45px;

  color: #999999;
}
image {
  width: 150px;
  height: 150px;
}
.content-img2 {
  background-color: white;
  box-shadow: 0px 7px 7px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  width: 210px;
  height: 210px;
}
.content-img2 img {
  height: 205px;
  border-radius: 30%;
}