.box{
  width: 100%;
  height: 700px;
  background-color: antiquewhite;
}

/* 头 */
.box1{
  width: 100%;
  height: 50px;
  position: absolute;
  background-color: #eec2c7;
}
.box1 image{
  width: 30px;
  height: 30px;
  position: absolute;
  top: 15px;
  left: 160px;
  border-radius: 50px;
}

/* 客服名称 */
.p1{
  font-size: 15px;
  position: absolute;
  left: 200px;
  top: 20px;
}

/* 对话框 */
.box2{
  width: 100%;
  height: 700px;
  position: absolute;
  top: 50px;
  background-color: #ffffff;
}
.box2 image{
  width: 40px;
  height: 40px;
  position: absolute;
  top: 28px;
  left: 15px;
  border-radius: 50px;
}

/* 客服消息  框 */
.box3{
  width: 260px;
  height: 40px;
  position: absolute;
  left: 70px;
  top: 25px;
  border: 1px #cfcfcf solid;
  border-radius: 10px;
}

/* 客服消息 字 */
.p2{
  font-size: 15px;
  position: absolute;
  top: 10px;
  left: 10px;
}

/* 底部问话框 */
.box4{
  width: 388px;
  height: 320px;
  position: fixed;
  bottom: 20px;
  border: 2px #cfcfcf solid;
  border-radius: 15px;
}

/* 发送 框和字*/
.box5{
  width: 60px;
  height: 30px;
  position: absolute;
  top: 5px;
  right: 20px;
  background-color: #de868f;
  border-radius: 10px;
}

/* 预约 框和字*/
.box7{
  width: 60px;
  height: 30px;
  position: absolute;
  bottom: 45px;
  right: 20px;
  background-color: #58a55c;
  border-radius: 10px;
}
.p4{
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  top: 6px;
  left: 15px;
  color: #ffffff;
}

/* 《预约时间段》 */
.p8{
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  left: 20px;
  top: 30px;
}

/* 时间选择框 */
.box71{
  width: 110px;
  height: 40px;
  position: absolute;
  left: 15px;
  top: 70px;
  border: 1px #cfcfcf solid;
  border-radius: 10px;
}
.box72{
  width: 110px;
  height: 40px;
  position: absolute;
  left: 140px;
  top: 70px;
  border: 1px #cfcfcf solid;
  border-radius: 10px;
}
.box73{
  width: 110px;
  height: 40px;
  position: absolute;
  right: 15px;
  top: 70px;
  border: 1px #cfcfcf solid;
  border-radius: 10px;
  background-color: #cfcfcf;
}
.box74{
  width: 110px;
  height: 40px;
  position: absolute;
  left: 15px;
  top: 140px;
  border: 1px #cfcfcf solid;
  border-radius: 10px;
}
.box75{
  width: 110px;
  height: 40px;
  position: absolute;
  left: 140px;
  top: 140px;
  border: 1px #cfcfcf solid;
  border-radius: 10px;
  background-color: #cfcfcf;
}
.box76{
  width: 110px;
  height: 40px;
  position: absolute;
  right: 15px;
  top: 140px;
  border: 1px #cfcfcf solid;
  border-radius: 10px;
}
.box77{
  width: 110px;
  height: 40px;
  position: absolute;
  left: 15px;
  top: 200px;
  border: 1px #cfcfcf solid;
  border-radius: 10px;
  background-color: #cfcfcf;
}
.box78{
  width: 110px;
  height: 40px;
  position: absolute;
  left: 140px;
  top: 200px;
  border: 1px #cfcfcf solid;
  border-radius: 10px;
}
.box79{
  width: 110px;
  height: 40px;
  position: absolute;
  right: 15px;
  top: 200px;
  border: 1px #cfcfcf solid;
  border-radius: 10px;
}

/* 时间段 字 */
.p10{
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  left: 10px;
  top: 10px;
}