﻿
   .navindex1 {
    padding: 0 6.6rem;
}
  .jindu{
    position: absolute;
    left: 0;
    top: 0;
    height: 4px;
    background: #e62129;
    width: 100%;
    animation: jindutiao 3s linear ;
  }
  @-webkit-keyframes jindutiao {
   0% {
    width: 11.3rem;
  }
   100% {
    width: 100%;
  
  }
  }

.abhindex1{
  background: url('../images/list4-map1.png') no-repeat;
  background-position: center;
  background-size: 100%;
  width: 100%;
  height: 9.5rem;
  padding-top: .65rem;
  box-sizing: border-box;
  position: relative;
}
.abhindex1>h5{
  font-size: .5rem;
  line-height: 1;
  margin: 0;
  color: #333;
  text-align: center;
}
@keyframes warn {
  0% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.0;
  }

  25% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.1;
  }

  50% {
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      opacity: 0.3;
  }

  75% {
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      opacity: 0.5;
  }

  100% {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 0.0;
  }
}

@keyframes warn1 {
  0% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.0;
  }

  25% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.1;
  }

  50% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.3;
  }

  75% {
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      opacity: 0.5;
  }

  100% {
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      opacity: 0.0;
  }
}
.cirle{
  position: absolute;
  width: 15px;
  height: 15px;
}
.c1{
  left: 3.88rem;
  top: 4.2rem;
}
.c2{
  left: 4.6rem;
  top: 4.45rem;
}
.c3{
  left: 9.4rem;
  top: 3rem;
}
.c4{
  left: 9.8rem;
  top: 3.08rem;
}
.c5{
  left: 9.5rem;
  top: 3.4rem;
}
.c6{
  left: 13.8rem;
  top: 4.8rem;
}
.c7{
  right: 3.75rem;
  top: 7.3rem;
}
.c8{
  left: 8.9rem;
    top: 3.6rem;
}

.c9{
  left: 13.45rem;
  top: 5.1rem;
}
.c10{
  left: 13.25rem;
  top: 5.3rem;
}
.c11{
  left: 13.3rem;
  top: 5.7rem;
}

.dot {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 0;
  top: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border: 5px solid #e62129;
  border-radius: 50%;
  background-color: #fff;
  /* 实心圆 ，如果没有这个就是一个小圆圈 */
  z-index: 2;
  box-sizing: border-box;
}

/* 产生动画（向外扩散变大）的圆圈 第一个圆 */
.pulse {
  box-sizing: border-box;
  position: absolute;
  width: 35px;
  height: 35px;
  left: -10px;
  top: -10px;
  border: 5px solid #f1a9ac;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  -webkit-animation: warn 4s ease-out;
  -moz-animation: warn 4s ease-out;
  animation: warn 4s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  box-shadow: 3px 3px 30px #f1a9ac;
  /* 阴影效果 */
}

/* 产生动画（向外扩散变大）的圆圈 第二个圆 */
.pulse1 {
  position: absolute;
  width: 50px;
  height: 50px;
  left: -10px;
  top: -10px;
  border: 5px solid #f7e3e6;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  -webkit-animation: warn1 4s ease-out;
  -moz-animation: warn1 4s ease-out;
  animation: warn1 4s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  box-shadow: 3px 3px 30px #f7e3e6;
  /* 阴影效果 */
}

.abhindex1 p{
  font-size: .16rem;
  color: #333;
  position: relative;
  margin: 0;
  line-height: 1.4;
}
.c1_txt {
  left: 3.4rem;
  top: 2.45rem;
}
.c2_txt {
  left: 4.25rem;
  top: 3.2rem;
}
.c3_txt {
  left: 7.8rem;
  top: 0.7rem;
}
.c4_txt {
  left: 9.8rem;
  top: 0rem;
}
.c5_txt {
  left: 9.8rem;
  top: 0.5rem;
}
.c6_txt {
  left: 13rem;
  top: 1rem;
}
.c7_txt{
  left: 14.9rem;
    top: 3.4rem;
}
.c8_txt {
  left: 8.5rem;
  top: 0.15rem;
}

.c9_txt {
  left: 13.7rem;
  top: 0.4rem;
}
.c10_txt {
  left: 10.7rem;
  top: 0rem;
}
.c11_txt {
  left: 13rem;
  top: 0.4rem;
}

.abh2_box{
  display: flex;
  justify-content: space-between;
}
.abh_right{
  display: flex;
  justify-content: space-between;
}
.abhindex2{
  margin: 0 1.1rem;
  margin-top: -.95rem;
  margin-bottom: 1.6rem;
}
.abh2_box{
  background: #fff;
  border-radius: 10px;
  -moz-box-shadow: 0px 2px 16px #ccc;
    -webkit-box-shadow: 0px 2px 16px #ccc;
    box-shadow: 0px 2px 16px #ccc;
    margin-bottom: .18rem;
    padding: .55rem 1rem .65rem .8rem;
    box-sizing: border-box;
}
.abh2_box h5{
  font-size: .16rem;
  color: #888;
  line-height: 1;
  margin: 0;

}
.abh2_box p{
  font-size: .24rem;
  color: #333;
  line-height: 1;
  margin: 0;
  margin-top: .22rem;
  font-family:PingFang SC;
}
.abh_left{
  width: 3.2rem;
}
.abh_center{
  width: 6rem;
  padding-left: .8rem;
  box-sizing: border-box;
  position: relative;
}
.abh_center::before{
  content: '';
  width: 1px;
  height: .65rem;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 1;
  background: #eeeeee;
}
.abh_right{
  width: 5.8rem;
  padding-left: 1.1rem;
  box-sizing: border-box;
  position: relative;
}
.abh_right::before{
  content: '';
  width: 1px;
  height: .65rem;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 1;
  background: #eeeeee;
}
.lian{
  width: 1.2rem;
  height: .45rem;
  line-height: .45rem;
  display: inline;
  font-size: .16rem;
  border-radius: .22rem;
  color: #fff;
  background: #313131;
  -webkit-transition: 0.3s linear;
	-moz-transition: 0.3s linear;
	-ms-transition: 0.3s linear;
	-o-transition: 0.3s linear;	
    transition: 0.3s linear;
    text-align: center;
    margin-top: .3rem;
}
.lian>img{
  width: .16rem;
    margin-left: .15rem;
    position: relative;
    top: -.01rem;
}
.lian:hover{
  background: #e62129;
}
@media (max-width: 1440px){
  .c1_txt {
    left: 3.4rem;
    top: 2.45rem;
}
.c2_txt{
  left: 4.25rem;
  top: 3.3rem;
}
.c3_txt {
  left: 7.8rem;
  top: 0.8rem;
}
.c4_txt {
  left: 10.2rem;
  top: 0.2rem;
}
.c5_txt {
  left: 9.95rem;
  top: .6rem;
}
.c6_txt{
  left: 13.45rem;
    top: 1rem;
}
.c7_txt{
  left: 14.9rem;
    top: 3.5rem;
}
.c8_txt {
  left: 8.5rem;
  top: 0.2rem;
}

.c9_txt{
  left: 13.7rem;
    top: 0.5rem;
}
.c10_txt{
  left: 10.7rem;
    top: 0.2rem;
}
.c11_txt{
  left: 13rem;
    top: 0.5rem;
}


}
  @media (max-width: 992px){
    
    .navindex1 {
      padding: 0;
    }
    .jindu {
      position: absolute;
      left: 0;
      top: 0;
      height: 4px;
      background: #e62129;
      width:100%;
      animation: jindutiao 3s linear;
    }
    @-webkit-keyframes jindutiao {
      0% {
       width: 78%;
     }
      100% {
       width: 100%;
     
     }
     }
     .abhindex1>h5 {
      font-size: 20px;
      color: #333;
      text-align: center;
  }
  .abhindex1 p {
    font-size: 12px !important;

}

.abhindex1{
  background: url('../images/phdt.jpg') no-repeat;
  background-position: center;
  background-size: 100%;
  width: 100%;
  height: 17rem;
  padding-top: 30px;
  box-sizing: border-box;
  position: relative;
}
.c1 {
  left: 14%;
  top: 46%;
}
.c2 {
  left: 22%;
  top: 48%;
}
.c3 {
  left: 48%;
  top: 34%;
}
.c4 {
  left: 55%;
  top: 38%;
}
.c5 {
  left: 50%;
  top: 43%;
}
.c6 {
  left: 76%;
  top: 50%;
}
.c7 {
  right: 14%;
  top: 70%;
}
.c8{
    left: 43%;
    top: 45%;
}
.c9{
    left: 73%;
    top: 56.5%;
}
.c10{
    left: 71%;
    top: 58.5%;
}
.c11{
    left: 71%;
    top: 62.5%;
}
.c2 .dot {
  border: 5px solid #FF9800;
}
.c2 .pulse {
  border: 5px solid #FF9800;
}
.c2 .pulse1 {
  /* border: 5px solid #FF9800; */
}
.c3 .dot {
  border: 5px solid #FFEB3B;
}
.c3 .pulse {
  border: 5px solid #FFEB3B;
}
.c4 .dot {
  border: 5px solid #4CAF50;
}
.c4 .pulse {
  border: 5px solid #4CAF50;
}
.c5 .dot {
  border: 5px solid #CDDC39;
}
.c5 .pulse {
  border: 5px solid #CDDC39;
}
.c6 .dot {
  border: 5px solid #03a9f4;
}
.c6 .pulse {
  border: 5px solid #03a9f4;
}
.c7 .dot {
  border: 5px solid #673ab7;
}
.c7 .pulse {
  border: 5px solid #673ab7;
}
.c8 .dot {
  border: 5px solid #795548;
}
.c8 .pulse {
  border: 5px solid #795548;
}
.c9 .dot {
  border: 5px solid #b73a3a;
}
.c9 .pulse {
  border: 5px solid #b73a3a;
}
.c10 .dot {
  border: 5px solid #8a9912;
}
.c10 .pulse {
  border: 5px solid #8a9912;
}
.c11 .dot {
  border: 5px solid #122999;
}
.c11 .pulse {
  border: 5px solid #122999;
}

.zhu{
  background: #dcdfe4;
  padding: 0 20px 30px;
  margin-top: -20px;
}
.zhu>div>div{
  width: 10px;
  height: 10px;
  border-radius: 100%;
  margin-right: 10px;
  margin-top: 5px;
}
.zhu>div{
  display: flex;
  justify-content: flex-start;
}
.zh1{
background: #e62129;
}
.zh2{
  background: #FF9800;
}
.zh3{
  background: #FFEB3B;
}
.zh4{
  background: #4CAF50;
}
.zh5{
  background: #CDDC39;
}
.zh6{
  background: #03a9f4;
}
.zh7{
  background: #673ab7;
}
.zh8{
  background: #795548;
}
.zh9 {
    background: #b73a3a;
}
.zh10 {
    background: #8a9912;
}
.zh11 {
    background: #122999;
}
.zhu p {
  font-size: 16px !important;
}
.c1_txt {
  left: 2%;
  top: 26%;
}
.c2_txt {
  left: 11%;
  top: 40%;
}
.c3_txt {
  left: 33%;
  top: 3%;
}
.c4_txt {
  left: 55%;
  top: 5%;
}
.c5_txt {
  left: 36%;
  top: 21%;
}
.c6_txt {
  left: 61%;
  top: 25%;
}
.c7_txt {
  left: 72%;
  top: 42%;
}
    }