.family{
  background: url(/template/huabang/mobile/imgs/family/bg_only.png) no-repeat;
  background-size: 7.5rem 19.79rem;
  position: relative;
  /* height: 19.79rem; */
  height: 18.5rem;
  top: 0;
}

@font-face{
  font-family: 'ZhanKuQingKeHuangYouTi'; 
  src: url('/template/huabang/mobile/fonts/ZhanKuQingKeHuangYouTi/ZhanKuQingKeHuangYouTi-2.eot');
  src:url('/template/huabang/mobile/fonts/ZhanKuQingKeHuangYouTi/ZhanKuQingKeHuangYouTi-2.woff') format('woff'),
      url('/template/huabang/mobile/fonts/ZhanKuQingKeHuangYouTi/ZhanKuQingKeHuangYouTi-2.ttf') format('truetype'),
      url('/template/huabang/mobile/fonts/ZhanKuQingKeHuangYouTi/ZhanKuQingKeHuangYouTi-2.svg') format('svg');
}

.name{
  position: absolute;
  color: #fff;
  font-family: ZhanKuQingKeHuangYouTi;
  text-align: center;
}
.group1,.group2,.group3,.group4{
  position: absolute;
}
.group1{
  width: 7.07rem;
  height: 5.77rem;
  top: .39rem;
  left: .27rem;
  background: url(/template/huabang/mobile/imgs/family/g1.png) no-repeat;
  background-size: 100% 100%;
}
.group1 .name1{
  top: 1.07rem;
  left: .66rem;
  font-size: .36rem;
}
.group1 .name2{
  top: 3.9rem;
  left: .4rem;
  font-size: .28rem;
}
.group1 .name3{
  top: 2.4rem;
  left: 3.5rem;
  font-size: .36rem;
}
.group1 .name4{
  top: .7rem;
  right: .65rem;
  font-size: .28rem;
}
.group1 .name5{
  top: 4.6rem;
  right: 1.13rem;
  font-size: .28rem;
}

.group2{
  width: 7.19rem;
  height: 6.36rem;
  top: 5.16rem;
  left: .11rem;
  background: url(/template/huabang/mobile/imgs/family/g2.png) no-repeat;
  background-size: 100% 100%;
}
.group2 .name1{
  top: 1.11rem;
  left: .4rem;
  font-size: .28rem;
}
.group2 .name2{
  top: .71rem;
  left: 3rem;
  font-size: .28rem;
}
.group2 .name3{
  top: 3.16rem;
  left: 2rem;
  font-size: .36rem;
}
.group2 .name4{
  top: 2.9rem;
  right: .65rem;
  font-size: .36rem;
}
.group2 .name5{
  top: 5.4rem;
  right: 2.52rem;
  font-size: .28rem;
}

.group3{
  width: 4.67rem;
  height: 4.01rem;
  top: 10.08rem;
  left: .31rem;
  background: url(/template/huabang/mobile/imgs/family/g3.png) no-repeat;
  background-size: 100% 100%;
}
.group3 .name1{
  top: .72rem;
  left: .43rem;
  font-size: .28rem;
}
.group3 .name2{
  top: 2.85rem;
  left: 1.15rem;
  font-size: .28rem;
}
.group3 .name3{
  top: 2.29rem;
  left: 3.3rem;
  font-size: .36rem;
}

.group4{
  width: 6.95rem;
  height: 5.74rem;
  top: 11.83rem;
  left: .35rem;
  background: url(/template/huabang/mobile/imgs/family/g4.png) no-repeat;
  background-size: 100% 100%;
}
.group4 .name1 {
    top: 4.3rem;
    left: .38rem;
    font-size: .28rem;
}

.group4 .name2 {
    top: 2.8rem;
    left: 2.2rem;
    font-size: .28rem;
}
.group4 .name3 {
    top: 3rem;
    left: 4.52rem;
    font-size: .28rem;
}
.group4 .name4 {
    top: .7rem;
    right: .65rem;
    font-size: .28rem;
}
.group4 .name5 {
    top: 4.3rem;
    right: 2.9rem;
    font-size: .24rem;
}
.group4 .name6 {
    top: 4.9rem;
    right: 1.65rem;
    font-size: .24rem;
}
.group4 .name7 {
    top: 4.2rem;
    right: 0.25rem;
    font-size: .24rem;
}<!--9.1075897216797E-5-->