*{
  padding: 0;
  margin: 0 auto;
}
li{
  list-style: none;

}
.list ul{
  transform: translateX(-475px);
  margin-left: -200px;
  font-size: 19px;
  padding-top: 60px;

  display: flex;
}
.bg1{
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.09);
}
.list ul li{
margin: 0;
  margin-left:0;}

.list ul img{
  width: 20px;
  height: 20px;

}
.all{
  background-color: #FDFEFE;
}
.center{
  width: 79%;


}
.abc{
  transform: translateY(3px);
  padding-right: 10px;
}
.img{
  transform: translateY(3px);
}
.header{
  position: relative;
  background-color: #E5E9F5;
  height: 600px;
}

.progress-container {
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    position: relative;

}

.progress-fill {
    height: 100%;
    margin-top: 0;
    width: 75%;
    background: linear-gradient(90deg, #4f46e5, #06b6d4);
    border-radius: 4px;
    transition: width 1000ms ease-out;
float: left;
}
.x6{
  margin-left: 0;
}
.span1{
  font-size: 24px;
  margin-left: 0;
}
.x2{

  margin-bottom: 10px;
  width: 100%;
}
.progress-container1{
  width: 100%;
  margin-bottom: 50px;
}
.progress-text{
  margin-right: 0;
}
.x4{
  margin-right: 0;
  padding: 10px 10px;
  border-radius: 20px;
  width: 299px;
  margin-left: 0;

  background-color: #F9FAFB;
}
.x2,.x5{
  display: flex;
}
.x5{
  font-size: 19px;
  margin-bottom: -10px;
}
.x3{
gap: 10px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
}
.progress-text1 {
  margin-right: 0;
  font-size: 24px;
    text-align: center;
    margin-top: 8px;

    color: #373737;
}
.progress-text {
    text-align: center;
    margin-top: 8px;
    font-size: 19px;
    color: #374151;
}
h1{
  position: absolute;
  left: 160px;
  top:140px;

height: 82px;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 62px;
color: #000000;
text-align: left;
font-style: normal;
text-transform: none;
}
h2{
  position: absolute;
left: 160px;
top:230px ;
width: 434px;
height: 82px;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 62px;
color: #165DFF;
text-align: left;
font-style: normal;
text-transform: none;
}
h3{
  position: absolute;
  left: 160px;
  width: 726px;
height: 96px;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 24px;
color: #4E4E4E;
line-height: 48px;
text-align: left;
font-style: normal;
text-transform: none;
  top: 360px;
}
.box{
  padding: 20px;
  width: 644px;
height: 359px;
background: #FFFFFF;
box-shadow: 0px 4px 13px 0px rgba(168,178,208,0.46);
border-radius: 20px 20px 20px 20px;
  position: absolute;
top: 120px;
left: 1090px;

background-color: #FFFFFF;
}
.x1{
  padding-bottom: 10px;
  font-size: 32px;
  font-weight: 700;
}
.h1{width: 434px;
height: 55px;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 42px;
color: #000000;
text-align: center;
font-style: normal;
text-transform: none;
padding-top: 50px;
padding-bottom: 20px;

}
.h2{
width: 697px;
height: 52px;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 17px;
color: #AAAAAA;
padding-bottom: 50px;
line-height: 26px;
text-align: center;
font-style: normal;
text-transform: none;
}
.card{
  display: flex;
}
.per{
  width: 79%;
}
.a1{
  font-weight: 700;
  font-size: 20px;
  padding-bottom: 15px;
  color: #000000;
}
.a2{
padding-bottom: 20px;
}
.card1{

  color: #5671A3;
  padding: 20px;
  border-radius: 20px;
  margin-right: 20px;
  background-color:#F9FAFB ;
}
.a5 img{
  width: 19px;
  height: 15px;
  margin-right: 10px;
}
.active{
  padding-bottom: 15px;
}
.card{
  margin-bottom: 100px;
}
.cc{
  height: 20px;
  border-radius: 20px 20px 0 0;

}
.c1{
  background-color: #F45C2C;
}
.c2{
  background-color: #F2C00F;
}
.c3{
  background-color: #5096F8;
}
.c4{
  background-color: #30CE6A;
}
.c5{
  background-color:#B671FA ;
}
.c6{
  background-color: #E33131;
}
.c7{
  background-color:#767EF5 ;
}
.c9{
  background-color: #1FC4B1;
}
.box1{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.box2{

  border: 1px solid #f1f0f0;
  border-radius: 20px 20px 20px 20px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.09);
}
.k1,.k2,.k5{
  padding: 10px 20px;
}
.color1 .tips{
  color:#991B1B ;
  background-color:#FEE2E2 ;

}

.color2 .tips{

  color: #9E8352;
  background-color:#FEF9C3 ;
}
.color3 .tips{

  color:#865DB7 ;
  background-color:#DBEAFE ;
}
.color4 .tips{

  color:#2E724E ;
  background-color:#DCFCE7 ;
}
.color5 .tips{

  color:#8531AE ;
  background-color: #F3E8FF;
}
.color6 .tips{

  color:#C57E7E ;
  background-color: #FEE2E2;
}
.color7 .tips{
  color:#865DB7 ;
  background-color:#DBEAFE ;
}
.color9 .tips{

  color: #287F93;
  background-color:#CCFBF1 ;
}
.tips{
  width: 60px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin-right: 20px;
  margin-top: 20px;
}
.k1{
  font-size: 24px;
  font-weight: 700;

}
.k5{
  display: flex;

}
.left{
  margin-left: 0;
}
.left1{
  margin-right: 0;
}
.tab2{
padding-bottom: 100px;
background-color:#F9FAFB ;
}
.box2{
  padding-bottom: 20px;
}
.tip1{
  gap: 40px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
}
.tip5{
  width: 600px;
  border-radius: 20px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.09);
}
.tip5 img{
width: 19px;
height: 15px;

}
.icon1{
  text-align: right;
}
.name1{
  border:  1px solid #e7e7eb;
}
.line1{
  padding: 20px;
  font-size: 24px;
  font-weight: 700;
}
.line2{
  padding:  0 20px 20px;
}
.detail1{
  padding:0 20px 10px ;
}
.name{
  display: flex;
}
.name1{
  width: 400px;
padding: 20px;
border-radius: 20px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.09);
}
.top img{
  transform: translateY(5px);
  height: 20px;
}
.center1{
  font-weight: 700;
  font-size: 24px;
  padding: 20px 0;
}
.name ul{
  padding: 10px 0;
  display: flex;
  margin-left: 0;

}
.name1 ul li{
  padding: 0 10px;
  border-radius: 20px;
  margin-right: 10px;
background-color: #e7e7eb;
}
.avatar{
  display: flex;
  padding-top: 20px;
}
.avatar img{
  margin: 0;
  width: 29px;
  height: 29px;
}
.avatar7{
  font-size: 19px;
margin-left: 0;
  float: left;
}
.price{
  margin-right: 0;
}
.price1{
  color: #165DFF;
  font-weight: 700;
  font-size: 27px;
}
.price2{float: right;
  margin-right: 0;
  text-decoration: line-through;
}
.tab7{
  padding-bottom: 100px;
}