/*注册区域*/
.section3 .content {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 30%;
}
.section3 .content .bg-img {
    width: 70%;
    margin: 0 auto;
}
.section3 .content .bg-img img {
    width: 100%;
}
.section3 .quyu .item {
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: inline-block;
    position: absolute;
    /*cursor: pointer;*/
    -webkit-opacity: 1;  /* Chrome */
    -moz-opacity: 1;  /* Firefox */
    -khtml-opacity: 1;  /* Safari */
    opacity: 1;  /* IE9 + */
    filter:alpha(opacity=1);  /* IE 4-9 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";  /*This works in IE 8 & 9 too*/   
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=1);  /*IE4-IE9*/  
}
.section3 .quyu .item a {
    width: 20%;
    height: 20%;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 10;
}
.section3 .quyu .item p {
    position: absolute;
    font-size: 1.8rem;
    display: inline-block;
    width: 100px;
    text-align: center;
    top: 60%;
    left: 50%;
    margin-left: -50px;
}
.section3 .quyu .item.on p {
    color: #14ecff;
}
.section3 .quyu .item .center {
    width: 4%;
    height: 4%;
    border-radius: 50%;
    background: white;
    position: absolute;
    top: 48%;
    left: 48%;
}
.section3 .quyu .item.on .center {
    width: 10%;
    height: 10%;
    border-radius: 50%;
    background: #14ecff;
    position: absolute;
    top: 45%;
    left: 45%;
}
.section3 .quyu .item .border {
    width: 10%;
    height: 10%;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    top: 45%;
    left: 45%;
    border: 1px solid white;
    box-sizing: border-box;
}
.section3 .quyu .item.on .border {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: rgba(20,236,255,.1);
    position: absolute;
    top: 25%;
    left: 25%;
    border: 1px solid #14ecff;
    box-sizing: border-box;
}
.section3 .quyu .item .center,
.section3 .quyu .item .border{
    transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
}
.section3 .quyu .item .spread {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(20,236,255,.1);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 1px solid #14ecff;
    box-sizing: border-box;
}

@-webkit-keyframes spreadAnimate {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: 100%;
    height: 100%;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    filter:alpha(opacity=0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  }
}
.section3 .quyu .item.on .spread-1 { animation: spreadAnimate 2s ease .1s infinite normal; }
.section3 .quyu .item.on .spread-2 { animation: spreadAnimate 2s ease .3s infinite normal; }
.section3 .quyu .item.on .spread-3 { animation: spreadAnimate 2s ease .6s infinite normal; }
.section3 .quyu .item.on .spread-4 { animation: spreadAnimate 2s ease .9s infinite normal; }
/*国家图标定位*/
.section3 .quyu .item-1 {
    left: 17%;
    top: 20%;
}
.section3 .quyu .item-2 {
    left: 18%;
    top: 27%;
}
.section3 .quyu .item-3 {
    left: 19%;
    top: 26%;
}
.section3 .quyu .item-4 {
    left: 20%;
    top: 26%;
}
.section3 .quyu .item-5 {
    left: 20.5%;
    top: 29%;
}
.section3 .quyu .item-6 {
    left: 24%;
    top: 35%;
}
.section3 .quyu .item-7 {
    left: 27.5%;
    top: 59%;
}
.section3 .quyu .item-8 {
    left: 28%;
    top: 41%;
}
.section3 .quyu .item-9 {
    left: 32%;
    top: 40%;
}
.section3 .quyu .item-10 {
    left: 37%;
    top: 54%;
}
.section3 .quyu .item-11 {
    left: 39%;
    top: 42%;
}
.section3 .quyu .item-12 {
    left: 40%;
    top: 50%;
}
.section3 .quyu .item-13 {
    left: 42%;
    top: 35%;
}
.section3 .quyu .item-14 {
    left: 43%;
    top: 70%;
}
.section3 .quyu .item-15 {
    left: 44%;
    top: 33%;
}
.section3 .quyu .item-16 {
    left: 50%;
    top: 48%;
}
.section3 .quyu .item-17 {
    left: 50%;
    top: 80%;
}
.section3 .quyu .item-18 {
    left: 54%;
    top: 66%;
}
.section3 .quyu .item-19 {
    left: 61%;
    top: 15%;
}
.section3 .quyu .item-20 {
    left: 65%;
    top: 26%;
}
.section3 .quyu .item-21 {
    left: 68%;
    top: 44%;
}
.section3 .quyu .item-22 {
    left: 69%;
    top: 43%;
}
.section3 .quyu .item-23 {
    left: 70%;
    top: 50%;
}
.section3 .quyu .item-24 {
    left: 72%;
    top: 35%;
}
.section3 .quyu .item-25 {
    left: 73%;
    top: 43%;
}
.section3 .quyu .item-26 {
    left: 74%;
    top: 46%;
}
/*国家图标定位-修改*/
.section3 .quyu .item-1 p {
    top: 25%
}
.section3 .quyu .item-3 p {
    top: 25%
}
.section3 .quyu .item-4 p {
    top: 41%;
    left: 73%;
}
.section3 .quyu .item-21 p {
    top: 41%;
    left: 20%;
}
.section3 .quyu .item-25 p {
    top: 41%;
    left: 73%;
}
 /* 本例子css */
      
	 
	      .section3 .content {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top:0px;
    }
    .section3 .content .bg-img {
      width: 70%;
      margin: 0 auto;
    }
    .section3 .content .bg-img img {
      width: 100%;
    }
    .section3 .quyu .item {
      width: 100px;
      height: 100px;
      overflow: hidden;
      display: inline-block;
      position: absolute;
      /*cursor: pointer;*/
      -webkit-opacity: 1;  /* Chrome */
      -moz-opacity: 1;  /* Firefox */
      -khtml-opacity: 1;  /* Safari */
      opacity: 1;  /* IE9 + */
      filter:alpha(opacity=1);  /* IE 4-9 */
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";  /*This works in IE 8 & 9 too*/
      filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=1);  /*IE4-IE9*/
    }
    .section3 .quyu .item a {
      width: 18%;
      height: 18%;
      border-radius: 50%;
      border: 1px solid #076bf2;
      background: transparent;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0%;
      right: 0;
      margin: auto;
      box-sizing: border-box;
      cursor: pointer;
      z-index: 10;
    }
    .section3 .quyu .item p {
      position: absolute;
      font-size: 16px;
      display: inline-block;
      width: 100px;
      text-align: center;
      top: 60%;
      left: 50%;
      margin-left: -50px;
    }
    .section3 .quyu .item.on p {
      color: #076bf2;
    }
    .section3 .quyu .item .center {
      width: 4%;
      height: 4%;
      border-radius: 50%;
      background: white;
      position: absolute;
      top: 48%;
      left: 48%;
    }
    .section3 .quyu .item.on .center {
      width: 10%;
      height: 10%;
      border-radius: 50%;
      background: #076bf2;
      position: absolute;
      top: 45%;
      left: 45%;
    }
    .section3 .quyu .item .border {
      width: 10%;
      height: 10%;
      border-radius: 50%;
      background: transparent;
      position: absolute;
      top: 45%;
      left: 45%;
      border: 1px solid white;
      box-sizing: border-box;
    }
    .section3 .quyu .item.on .border {
      width: 50%;
      height: 50%;
      border-radius: 50%;
      background: rgba(20,236,255,.1);
      position: absolute;
      top: 25%;
      left: 25%;
      border: 1px solid #076bf2;
      box-sizing: border-box;
    }
    .section3 .quyu .item .center,
    .section3 .quyu .item .border{
      transition: all .5s ease;
      -moz-transition: all .5s ease;
      -webkit-transition: all .5s ease;
      -o-transition: all .5s ease;
    }
    .section3 .quyu .item .spread {
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(20,236,255,.1);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      border: 3px solid #076bf2;
      box-sizing: border-box;
    }
    /*.section3 .quyu .item.on .spread {
        width: 100%;
        height: 100%;
        -webkit-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        opacity: 0;
        filter:alpha(opacity=0);
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }*/
    /*.section3 .quyu .item.on .spread-1  {
        transition: all 2s ease .1s;
        -moz-transition: all 2s ease .1s;
        -webkit-transition: all 2s ease .1s;
        -o-transition: all 2s ease .1s;
    }
    .section3 .quyu .item.on .spread-2  {
        transition: all 2s ease .3s;
        -moz-transition: all 2s ease .3s;
        -webkit-transition: all 2s ease .3s;
        -o-transition: all 2s ease .3s;
    }
    .section3 .quyu .item.on .spread-3  {
        transition: all 2s ease .6s;
        -moz-transition: all 2s ease .6s;
        -webkit-transition: all 2s ease .6s;
        -o-transition: all 2s ease .6s;
    }
    .section3 .quyu .item.on .spread-4  {
        transition: all 2s ease .9s;
        -moz-transition: all 2s ease .9s;
        -webkit-transition: all 2s ease .9s;
        -o-transition: all 2s ease .9s;
    }*/

    @-webkit-keyframes spreadAnimate {
      0% {
        width: 0;
        height: 0;
      }
      100% {
        width: 100%;
        height: 100%;
        -webkit-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        opacity: 0;
        filter:alpha(opacity=0);
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      }
    }
    .section3 .quyu .item.on .spread-1 { animation: spreadAnimate 2s ease .1s infinite normal; }
    .section3 .quyu .item.on .spread-2 { animation: spreadAnimate 2s ease .3s infinite normal; }
    .section3 .quyu .item.on .spread-3 { animation: spreadAnimate 2s ease .6s infinite normal; }
    .section3 .quyu .item.on .spread-4 { animation: spreadAnimate 2s ease .9s infinite normal; }
    /*鍥藉鍥炬爣瀹氫綅*/
    .section3 .quyu .item-1 {
      left: 9%;
      top: 17%;
    }
    .section3 .quyu .item-2 {
      left: 17%;
      top: 30%
    }
    .section3 .quyu .item-3 {
      left: 19%;
      top: 47%;
    }
    .section3 .quyu .item-4 {
      left: 23%;
      top: 47%;
    }
    .section3 .quyu .item-5 {
      left: 30%;
      top: 49%;
    }
    .section3 .quyu .item-6 {
      left: 24%;
      top: 39%;
    }
    .section3 .quyu .item-7 {
      left: 24%;
      top: 54%
    }
    .section3 .quyu .item-8 {
      left: 28%;
      top: 45%;
    }
    .section3 .quyu .item-9 {
      left: 39%;
      top: 17%;
    }
    .section3 .quyu .item-10 {
      left: 41%;
      top: 20%
    }
    .section3 .quyu .item-11 {
      left: 40%;
      top: 24%;
    }
    .section3 .quyu .item-12 {
      left: 48%;
      top: 37%;
    }
    .section3 .quyu .item-13 {
      left: 42%;
      top: 29%;
    }
    .section3 .quyu .item-14 {
      left: 44%;
      top: 27%;
    }
    .section3 .quyu .item-15 {
      left: 44%;
      top: 24%;
    }
    .section3 .quyu .item-16 {
      left: 43%;
      top: 21.5%;
    }
    .section3 .quyu .item-17 {
      left: 56%;
      top: 45%;
    }
    .section3 .quyu .item-18 {
      left: 57%;
      top: 61%;
    }
    .section3 .quyu .item-19 {
      left: 56%;
      top: 70%;
    }
    .section3 .quyu .item-20 {
      left: 63%;
      top: 45%;
    }
    .section3 .quyu .item-21 {
      left: 68%;
      top: 44%;
    }
    .section3 .quyu .item-22 {
      left: 69%;
      top: 43%;
    }
    .section3 .quyu .item-23 {
      left: 70%;
      top: 50%;
    }
    .section3 .quyu .item-24 {
      left: 71%;
      top: 59%
    }
    .section3 .quyu .item-25 {
      left: 72%;
      top: 51%;
    }
    .section3 .quyu .item-26 {
      left: 74%;
      top: 57%;
    }
    /*鍥藉鍥炬爣瀹氫綅-淇敼*/
    .section3 .quyu .item-1 p {
      top: 17%
    }
    .section3 .quyu .item-3 p {
      top: 17%
    }
    .section3 .quyu .item-4 p {
      top: 37%;
      left: 79%;
    }
    .section3 .quyu .item-21 p {
      top: 41%;
      left: 20%;
    }
    .section3 .quyu .item-25 p {
      top: 41%;
      left: 73%;
    }