#guide {
  background-image: url("../image/service/banner.jpg");
}
.service_container {
  width: 1200px;
  margin: 38px auto;
}
.service_container .service_nav {
  display: flex;
  margin-top: 38px;
  height: 170px;
}
.service_container .service_nav .left {
  background: #054db7;
  width: 412px;
  display: flex;
  justify-content: space-between;
}
.service_container .service_nav .left span {
  cursor: pointer;
  width: 50%;
  height: 100%;
  line-height: 170px;
  text-align: center;
  font-weight: lighter;
  color: #ffffff;
}
.service_container .service_nav .left span.active {
  font-weight: bold;
  font-size: 18px;
}
.service_container .service_nav .right {
  background: url("../image/service/banner1.jpg") no-repeat center/cover;
  width: 788px;
  padding: 0 128px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  display: flex;
}
.service_container .service_nav .right span {
  font-weight: bold;
  font-size: 24px;
}
.service_container .service_nav .right span.page {
  font-weight: lighter;
}
.service_container .service_nav .right i {
  height: 1px;
  width: 277px;
  font-size: 0;
  background: #ffffff;
}
.service_container ul.service_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 1200px;
  margin: 38px auto 0;
}
.service_container ul.service_list li {
  border: 1px solid #064db7;
  padding: 38px 30px 0 30px;
  width: 350px;
  height: 305px;
  box-sizing: border-box;
  margin-bottom: 50px;
}
.service_container ul.service_list li .location {
  color: #064db7;
  font-size: 18px;
  font-weight: bold;
  padding-left: 30px;
  background: url("../image/service/location.png") no-repeat 0 center;
}
.service_container ul.service_list li .title {
  font-size: 18px;
  color: #000000;
  margin-top: 30px;
  line-height: 30px;
  height: 60px;
  font-weight: bold;
  overflow: hidden;
  margin-bottom: 34px;
}
.service_container ul.service_list li .content {
  font-size: 14px;
  color: #3e3a39;
  line-height: 26px;
  overflow: hidden;
}
.service_container ul.service_list li i {
  width: 100%;
  height: 1px;
  background: #064db7;
  font-size: 0;
  display: block;
  margin-top: 38px;
}
.service_container .map_container {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin-top: 38px;
}
.service_container .map_container .left {
  border: 1px solid #064db7;
  width: 783px;
}
.service_container .map_container .right {
  width: 372px;
  padding: 35px 37px;
  box-sizing: border-box;
  border: 1px solid #064db7;
  display: none;
}
.service_container .map_container .right.con {
  display: block;
}
.service_container .map_container .right .r_title {
  color: #054db7;
  font-size: 24px;
  font-weight: bold;
  padding-left: 27px;
  position: relative;
}
.service_container .map_container .right .r_title:after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  left: 0;
  top: 50%;
  background: #064db7;
  margin-top: -4px;
}
.service_container .map_container .right ul {
  margin-top: 21px;
}
.service_container .map_container .right ul li {
  border-top: 1px solid #3e3a39;
  padding: 24px 0 0 0;
  box-sizing: border-box;
  margin-bottom: 28px;
}
.service_container .map_container .right ul li .location {
  color: #231815;
  font-size: 18px;
  font-weight: bold;
  padding-left: 30px;
  background: url("../image/service/location.png") no-repeat 0 center;
}
.service_container .map_container .right ul li .title {
  font-size: 14px;
  color: #000000;
  margin-top: 18px;
  line-height: 30px;
  font-weight: bold;
  overflow: hidden;
  padding-left: 0;
  margin-bottom: 18px;
}
.service_container .map_container .right ul li .content {
  font-size: 14px;
  color: #3e3a39;
  line-height: 26px;
  overflow: hidden;
}
/* line 84, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap {
  position: relative;
  width: 680px;
  margin: 0 auto;
}
.map_container .main_map .main-map-wrap img {
  display: block;
  width: 100%;
  margin: 57px auto;
}
/* line 88, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .area-point {
  position: absolute;
  cursor: pointer;
}
/* line 91, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .area-point .point-wrap {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
}
/* line 98, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .area-point .point-wrap .point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #064db7;
}
/* line 104, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .area-point .point-wrap .in_ring {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -8px 0 0 -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #064db7;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-animation: ringScale 1.8s 0.5s infinite;
  -webkit-animation: ringScale 1.8s 0.5s infinite;
  animation: ringScale 1.8s 0.5s infinite;
}
/* line 116, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .area-point .point-wrap .out_ring {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #064db7;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-animation: ringScale 1.8s infinite;
  -webkit-animation: ringScale 1.8s infinite;
  animation: ringScale 1.8s infinite;
}
/* line 129, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .area-point .area-name {
  font-size: 14px;
  line-height: 24px;
  color: #064db7;
}
/* line 138, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .active .point-wrap .point {
  background-color: white;
}
/* line 141, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .active .point-wrap .in_ring {
  border-color: white;
}
/* line 144, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .active .point-wrap .out_ring {
  border-color: white;
}
/* line 148, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .active .area-name {
  color: white;
}
/* line 152, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .china-point {
  top: 25px;
  left: 0;
}
/* line 156, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .china-point .point-wrap .point {
  background-color: #004098;
}
/* line 159, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .china-point .point-wrap .in_ring {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  border-color: #004098;
  -moz-animation: none;
  -webkit-animation: none;
  animation: none;
}
/* line 164, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .china-point .point-wrap .out_ring {
  border-color: #004098;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-animation: none;
  -webkit-animation: none;
  animation: none;
}
/* line 170, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .china-point .area-name {
  color: #004098;
}
/* line 174, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .north-point {
  top: 165px;
  left: 68%;
}
/* line 177, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .north-point .point-wrap {
  margin: 0 auto;
}
/* line 179, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .north-point .point-wrap .in_ring {
  -moz-animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
/* line 182, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .north-point .point-wrap .out_ring {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
/* line 186, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .north-point .area-name {
  margin-left: 0;
}
/* line 190, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .northeast-point {
  top: 90px;
  right: 40px;
}
/* line 193, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .northeast-point .point-wrap {
  margin: 0 auto;
}
/* line 195, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .northeast-point .point-wrap .in_ring {
  -moz-animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
/* line 198, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .northeast-point .point-wrap .out_ring {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
/* line 202, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .northeast-point .area-name {
  margin-left: 0;
}
/* line 206, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .center-point {
  top: 346px;
  left: 65%;
}
/* line 209, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .center-point .point-wrap {
  margin: 0 auto;
}
/* line 212, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .center-point .area-name {
  margin-left: 0;
}
/* line 216, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .east-point {
  top: 320px;
  left: 77%;
}
/* line 219, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .east-point .point-wrap {
  margin: 0 auto;
}
/* line 221, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .east-point .point-wrap .in_ring {
  -moz-animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
/* line 224, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .east-point .point-wrap .out_ring {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
/* line 228, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .east-point .area-name {
  margin-left: 0;
}
/* line 232, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .southwest-point {
  top: 343px;
  left: 25%;
}
/* line 236, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .southwest-point .point-wrap .in_ring {
  -moz-animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
/* line 239, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .southwest-point .point-wrap .out_ring {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
/* line 244, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .northwest-point {
  top: 200px;
  left: 25%;
}
/* line 248, ../sass/app/_service.scss */
.map_container .main_map .main-map-wrap .south-point {
  bottom: 63px;
  left: 63%;
}
/* line 256, ../sass/app/_service.scss */
.map_container .main_map.active {
  margin-left: 0;
}
@keyframes ringScale {
  0% {
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  10% {
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
    opacity: 0.125;
  }
  20% {
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.25;
  }
  30% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.375;
  }
  40% {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0.5;
  }
  50% {
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.625;
  }
  60% {
    -moz-transform: scale(1.8);
    -ms-transform: scale(1.8);
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
    opacity: 0.75;
  }
  70% {
    -moz-transform: scale(2.1);
    -ms-transform: scale(2.1);
    -webkit-transform: scale(2.1);
    transform: scale(2.1);
    opacity: 0.875;
  }
  80% {
    -moz-transform: scale(2.4);
    -ms-transform: scale(2.4);
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 1;
  }
  90% {
    -moz-transform: scale(2.7);
    -ms-transform: scale(2.7);
    -webkit-transform: scale(2.7);
    transform: scale(2.7);
    opacity: 0.5;
  }
  100% {
    -moz-transform: scale(3);
    -ms-transform: scale(3);
    -webkit-transform: scale(3);
    transform: scale(3);
    opacity: 0;
  }
}
@-webkit-keyframes ringScale {
  0% {
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  10% {
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
    opacity: 0.125;
  }
  20% {
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.25;
  }
  30% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.375;
  }
  40% {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0.5;
  }
  50% {
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.625;
  }
  60% {
    -moz-transform: scale(1.8);
    -ms-transform: scale(1.8);
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
    opacity: 0.75;
  }
  70% {
    -moz-transform: scale(2.1);
    -ms-transform: scale(2.1);
    -webkit-transform: scale(2.1);
    transform: scale(2.1);
    opacity: 0.875;
  }
  80% {
    -moz-transform: scale(2.4);
    -ms-transform: scale(2.4);
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 1;
  }
  90% {
    -moz-transform: scale(2.7);
    -ms-transform: scale(2.7);
    -webkit-transform: scale(2.7);
    transform: scale(2.7);
    opacity: 0.5;
  }
  100% {
    -moz-transform: scale(3);
    -ms-transform: scale(3);
    -webkit-transform: scale(3);
    transform: scale(3);
    opacity: 0;
  }
}
