html,
body {
  height: auto;
  height: 1140px;
}
body {
  background: #F4FAFF;
}
.top-header {
  background-image: url(../img/hbg.png);
  background-repeat: no-repeat;
  background-position: center 0;
  padding: 0.1px 0;
  height: 220px;
  color: #fff;
  line-height: 220px;
}
.tl-title {
  border-bottom: 4px solid #787878;
  text-align: left;
  color: #333;
}
.tl-title span.active {
  color: #1478F0;
}
.tl-tab {
  display: block;
  user-select: none;
}
.tl-tab > span {
  width: auto;
}
.tl-tab > span + span {
  margin-left: 30px;
}
.main {
  height: 996px;
  position: relative;
}
.main .map-wrap {
  height: 751px;
  margin: auto;
  position: absolute;
  top: 167px;
  width: 100%;
  text-align: center;
}
.main .map-wrap img {
  height: 100%;
}
.main .circle {
  position: absolute;
  border-radius: 50px;
  height: 600px;
  width: 600px;
  border-radius: 50%;
}
.main .circle.left {
  left: calc(30% - 300px);
}
.main .circle.right {
  left: calc(70% - 300px);
}
.main .bubble-wrap {
  position: absolute;
  height: 600px;
  width: 1094px;
  top: 76px;
  left: 68px;
  background-image: url(../img/bubble-bg.png);
  background-repeat: no-repeat;
  background-size: 95% 100%;
  background-position: 50%;
  user-select: none;
}
.main .bubble-wrap .ball {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: calc(50% - 80px);
  left: calc(50% - 80px);
  z-index: 999;
  cursor: pointer;
}
.main .bubble-wrap .ball > div {
  font-size: 16px;
  font-weight: 600;
  margin-top: 2rem;
}
.main .bubble-wrap .ball:hover {
  background: #639be096;
}
.main .bubble-wrap .ball:hover img {
  transform: scale(1.1);
  transition: 0.2s ease-in-out;
}
.main .bubble-wrap.active {
  display: block;
}
.nature .circle .ball {
  transform: scale(0.01) translate(0, 0);
  transition: all 0.5s ease-in-out;
}
.nature.active .circle:nth-child(1) .ball:nth-child(1) {
  transform: scale(1) translate(-300px, 0);
  transition: all 0.5s ease-in-out;
}
.nature.active .circle:nth-child(1) .ball:nth-child(2) {
  transform: scale(1) translate(-212.1px, -212.1px);
  transition: all 0.5s ease-in-out;
}
.nature.active .circle:nth-child(1) .ball:nth-child(3) {
  transform: scale(1) translate(60px, -291px);
  transition: all 0.5s ease-in-out;
}
.nature.active .circle:nth-child(1) .ball:nth-child(4) {
  transform: scale(1) translate(212.1px, -212.1px);
  display: none;
}
.nature.active .circle:nth-child(1) .ball:nth-child(5) {
  transform: scale(1) translate(300px, 0);
  display: none;
}
.nature.active .circle:nth-child(1) .ball:nth-child(6) {
  transform: scale(1) translate(212.1px, 212.1px);
  display: none;
}
.nature.active .circle:nth-child(1) .ball:nth-child(7) {
  transform: scale(1) translate(60px, 291px);
  transition: all 0.5s ease-in-out;
}
.nature.active .circle:nth-child(1) .ball:nth-child(8) {
  transform: scale(1) translate(-212.1px, 212.1px);
  transition: all 0.5s ease-in-out;
}
.nature.active .circle:nth-child(2) .ball:nth-child(1) {
  transform: scale(1) translate(-300px, 0);
  display: none;
}
.nature.active .circle:nth-child(2) .ball:nth-child(2) {
  transform: scale(1) translate(-212.1px, -212.1px);
  display: none;
}
.nature.active .circle:nth-child(2) .ball:nth-child(3) {
  transform: scale(1) translate(-60px, -291px);
  transition: all 0.5s ease-in-out;
}
.nature.active .circle:nth-child(2) .ball:nth-child(4) {
  transform: scale(1) translate(212.1px, -212.1px);
  transition: all 0.5s ease-in-out;
}
.nature.active .circle:nth-child(2) .ball:nth-child(5) {
  transform: scale(1) translate(300px, 0);
  transition: all 0.5s ease-in-out;
}
.nature.active .circle:nth-child(2) .ball:nth-child(6) {
  transform: scale(1) translate(212.1px, 212.1px);
  transition: all 0.5s ease-in-out;
}
.nature.active .circle:nth-child(2) .ball:nth-child(7) {
  transform: scale(1) translate(-60px, 291px);
  transition: all 0.5s ease-in-out;
}
.nature.active .circle:nth-child(2) .ball:nth-child(8) {
  transform: scale(1) translate(-212.1px, 212.1px);
  display: none;
}
.law .circle .ball {
  transform: scale(0.01) translate(0, 0);
  transition: all 0.5s ease-in-out;
}
.law.active .circle:nth-child(1) .ball:nth-child(1) {
  transform: scale(1) translate(-300px, 0);
  transition: all 0.5s ease-in-out;
}
.law.active .circle:nth-child(1) .ball:nth-child(2) {
  transform: scale(1) translate(0, -300px);
  transition: all 0.5s ease-in-out;
}
.law.active .circle:nth-child(1) .ball:nth-child(3) {
  transform: scale(1) translate(300px, 0);
  transition: all 0.5s ease-in-out;
  display: none;
}
.law.active .circle:nth-child(1) .ball:nth-child(4) {
  transform: scale(1) translate(0, 300px);
  transition: all 0.5s ease-in-out;
}
.law.active .circle:nth-child(2) .ball:nth-child(1) {
  transform: scale(1) translate(-300px, 0);
  display: none;
}
.law.active .circle:nth-child(2) .ball:nth-child(2) {
  transform: scale(1) translate(0, -300px);
  transition: all 0.5s ease-in-out;
}
.law.active .circle:nth-child(2) .ball:nth-child(3) {
  transform: scale(1) translate(300px, 0);
  transition: all 0.5s ease-in-out;
}
.law.active .circle:nth-child(2) .ball:nth-child(4) {
  transform: scale(1) translate(0, 300px);
  transition: all 0.5s ease-in-out;
}
