@charset "UTF-8";

/*加载字体*/

@font-face {
  font-family: "sybold";
  src: url("../fonts/SourceHanSans-Bold.otf");
}

@font-face {
  font-family: "syreg";
  src: url("../fonts/SOURCEHANSANSCN-REGULAR.OTF");
}

@font-face {
  font-family: "symed";
  src: url("../fonts/SOURCEHANSANSCN-MEDIUM.OTF");
}

@font-face {
  font-family: "bahnschrift";
  src: url("../fonts/bahnschrift.ttf");
}

img,
.head-link,
.sub-nav,
.zs-5head span,
.zs-5item,
.zs-5cont p,
.zs-6content .swiper-button-prev,
.zs-6content .swiper-button-next,
.zs-7item,
.zs-7cont em,
.zs-7content .swiper-button-prev,
.zs-7content .swiper-button-next,
.nav-genner ul li,
.nav-genner ul li:before,
.gs-1item,
.gs-1item samp,
.gs-2head ul li:before,
.gs-2head ul li samp,
.gs-2head ul li span,
.gs-2left em,
.gs-3item,
.gs-3bg,
.gs-3item .h4,
.gs-3item p,
.gs-3item ul li,
.gs-3item ul li:before,
.gs-3item span,
.gs-3item em,
.gs-4item,
.gs-4item:before,
.gs-4item span,
.gs-52,
.gs-6item,
.gs-6title samp,
.gs-6title span,
.gs-6info,
.gs-6cont ul,
.gs-6cont span,
.gs-6content .swiper-button-prev,
.gs-6content .swiper-button-next,
.gs-7center em,
.cj-1head ul li:before,
.cj-1head ul li samp,
.cj-1head ul li span,
.cj-2center em,
.yy-1more,
.vd-1pannel,
.vd-1pannel:before,
.vd-1item1 samp,
.vd-1item1 samp:before,
.vd-1item1 samp:after,
.vd-1item1 em:before,
.vd-1item1 em:after,
.vd-1item2 samp,
.vd-1item2 samp:before,
.vd-1item2 samp:after,
.vd-1item2 em:before,
.vd-1item2 em:after,
.vd-1item3 samp,
.vd-1item3 samp:before,
.vd-1item3 samp:after,
.vd-1item3 em:before,
.vd-1item3 em:after,
.vd-1item4 samp,
.vd-1item4 samp:before,
.vd-1item4 samp:after,
.vd-1item4 em:before,
.vd-1item4 em:after,
.vd-1item5 samp,
.vd-1item5 samp:before,
.vd-1item5 samp:after,
.vd-1item5 em:before,
.vd-1item5 em:after,
.vd-1item6 samp,
.vd-1item6 samp:before,
.vd-1item6 samp:after,
.vd-1item6 em:before,
.vd-1item6 em:after,
.vd-1item7 samp,
.vd-1item7 samp:before,
.vd-1item7 samp:after,
.vd-1item7 em:before,
.vd-1item7 em:after,
.vd-1item8 samp,
.vd-1item8 samp:before,
.vd-1item8 samp:after,
.vd-1item8 em:before,
.vd-1item8 em:after,
.vd-2content em,
.case-2info,
.case-prop,
.case-close {
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

/*分享*/

.weixin-prop {
  width: 300px;
  height: 380px;
  border: 1px #ddd solid;
  background: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -190px 0px 0px -150px;
  z-index: 2345667;
}

.weixin-close {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 10px;
  top: 10px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  color: #333;
  cursor: pointer;
}

.weixin-close:before {
  width: 60%;
  height: 2px;
  content: "";
  position: absolute;
  left: 20%;
  top: calc(50% - 1px);
  background: #333;
  transform: rotate(45deg);
}

.weixin-close:after {
  width: 60%;
  height: 2px;
  content: "";
  position: absolute;
  left: 20%;
  top: calc(50% - 1px);
  background: #333;
  transform: rotate(-45deg);
}

.weixin-img {
  float: left;
  width: 250px;
  margin: 60px 0px 0px 25px;
}

.weixin-img canvas {
  width: 250px;
  height: 250px;
}

.weixin-prop p {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 14px;
  text-align: center;
  color: #222;
}

/*swiper*/

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: auto;
}

.swiper-button-prev,
.swiper-button-next {
  background: none;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/*video*/

.video-prop {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.video-prop:before {
  height: 100%;
  content: "";
  display: inline-block;
  vertical-align: middle;
}

.video-center {
  width: 65%;
  vertical-align: middle;
  display: inline-block;
  position: relative;
}

.video-center video {
  width: 100%;
  height: auto;
  display: block;
}

.video-close {
  width: 36px;
  height: 36px;
  overflow: hidden;
  position: absolute;
  right: -18px;
  top: -18px;
  z-index: 12;
  border-radius: 50%;
  background: #fafafa;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.video-close:before {
  width: 60%;
  height: 2px;
  content: "";
  position: absolute;
  left: 20%;
  top: calc(50% - 1px);
  background: #333;
  transform: rotate(45deg);
}

.video-close:after {
  width: 60%;
  height: 2px;
  content: "";
  position: absolute;
  left: 20%;
  top: calc(50% - 1px);
  background: #333;
  transform: rotate(-45deg);
}

.video-close:hover {
  transform: rotate(180deg);
}

.video-active {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 768px) {
  .video-center {
    width: 90%;
  }

  .video-close {
    width: 32px;
    height: 32px;
    right: -16px;
    top: -16px;
  }
}

@media screen and (max-width: 768px) {
  .video-center {
    width: 90%;
  }

  .video-close {
    width: 32px;
    height: 32px;
    right: -16px;
    top: -16px;
  }
}

@keyframes updown {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fades {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zhuanquan {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*header*/

.head {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 16;
  background: #fff;
  box-shadow: 0px 0px 12px 4px rgba(0, 0, 0, 0.02);
}

.head-logo {
  float: left;
  width: 124px;
  height: 100%;
  margin-left: 60px;
}

.head-logo a {
  width: 100%;
  display: block;
  overflow: hidden;
  height: 100%;
  position: relative;
}

.head-logo img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.head-right {
  float: right;
  width: auto;
  height: 100%;
  margin-right: 60px;
}

.head-right ul {
  float: left;
  width: auto;
  overflow: hidden;
  height: 100%;
  line-height: 80px;
}

.head-right ul li {
  float: left;
  width: auto;
  overflow: hidden;
  height: 100%;
  margin-left: 50px;
}

.head-right ul li a {
  font-size: 16px;
  color: #333;
  font-family: "syreg";
}

.head-right ul li a:hover {
  color: #108cee;
}

.head-more {
  float: left;
  width: auto;
  margin-left: 60px;
  margin-top: 24px;
}

.head-link {
  width: 98px;
  height: 32px;
  line-height: 32px;
  overflow: hidden;
  background: #0f8cee;
}

.head-link a {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0px 12px;
  color: #fff;
  font-size: 14px;
  font-family: "syreg";
  background: url("../images/icon-32.png") no-repeat 75px center;
  cursor: pointer;
}

.head-link:hover {
  transform: translateY(3px);
}

.sub-nav {
  width: auto;
  position: absolute;
  right: 0px;
  top: 50px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  transform-origin: right top;
}

.sub-content {
  width: 900px;
  background: #fff;
  margin-top: 50px;
  box-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.03);
  position: relative;
  padding: 10px 0px;
}

.sub-content:before {
  width: auto;
  content: "";
  position: absolute;
  right: 90px;
  top: -12px;
  border-bottom: 12px #fff solid;
  border-left: 12px transparent solid;
  border-right: 12px transparent solid;
}

.sub-item {
  width: 87%;
  overflow: hidden;
  margin: 0px auto;
}

.sub-left {
  float: left;
  width: 240px;
  overflow: hidden;
  height: 75px;
  line-height: 75px;
  font-size: 18px;
  color: #333;
  font-family: "symed";
}

.sub-left samp {
  float: left;
  width: 44px;
  height: 100%;
}

.sub-right {
  float: right;
  width: 540px;
  overflow: hidden;
  height: 75px;
  line-height: 75px;
  box-sizing: border-box;
  border-bottom: 1px #eee solid;
}

.sub-right a {
  float: left;
  width: 113px;
  overflow: hidden;
  height: 100%;
  font-size: 16px;
  color: #666;
  font-family: "syreg";
  position: relative;
}

.sub-right a.icon:before {
  width: 23px;
  height: 100%;
  content: "";
  position: absolute;
  right: 10px;
  top: 0px;
  background: url("../images/icon-31.png") no-repeat center;
  background-size: 100%;
}

.sub-right a:last-child {
  width: auto;
}

.sub-content .sub-item:nth-child(2) .sub-right a:last-child {
  width: 113px;
}

.sub-right a:hover {
  color: #0f8cee;
}

.sub-item:last-child .sub-right {
  border: none;
}

.head-more:hover .sub-nav {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/*banner*/

.banner {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.banner img {
  float: left;
  width: 100%;
  height: auto;
}

.banner-ver {
  width: 1440px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  margin-top: 40px;
}

.banner-ver .h3 {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 46px;
  font-family: "symed";
}

.banner-ver p {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 20px;
  font-family: "syreg";
}

.banner-ver ul {
  float: left;
  width: 100%;
  overflow: hidden;
  margin-top: 40px;
}

.banner-ver ul li {
  float: left;
  width: 146px;
}

.banner-ver ul li span {
  width: 100%;
  display: block;
  overflow: hidden;
  font-size: 16px;
  font-family: "syreg";
}

.banner-ver ul li span samp {
  font-size: 50px;
  font-style: normal;
  font-family: "Arial", "Microsoft YaHei", "宋体";
  margin-right: 10px;
}

.banner-ver ul li em {
  width: 100%;
  display: block;
  overflow: hidden;
  font-size: 16px;
  font-family: "syreg";
  font-style: normal;
}

/*zhengti-fangan*/

.zs-1 {
  width: 100%;
  overflow: hidden;
  padding: 100px 0px 170px;
  background: #fff url("../images/bg.jpg") no-repeat left bottom;
  background-size: 100%;
}

.zs-2 {
  width: 1440px;
  overflow: hidden;
  margin: 0px auto;
}

.zs-2 .h3 {
  width: 100%;
  overflow: hidden;
  text-align: center;
  position: relative;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 30px;
}

.zs-2 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  background: #108cee;
}

.zs-2 form {
  width: 100%;
  display: block;
  overflow: hidden;
  margin-top: 60px;
  background: #edeff4;
  height: 60px;
  line-height: 60px;
}

.zs-2 .txt {
  float: right;
  width: calc(100% - 60px);
  overflow: hidden;
  height: 100%;
  background: none;
  font-size: 18px;
  color: #999;
  font-family: "syreg";
}

.zs-1 .txt::placeholder {
  color: #999 !important;
  opacity: 1;
}

.zs-1 .txt::-webkit-input-placeholder {
  color: #999 !important;
  opacity: 1;
}

.zs-1 .txt::-ms-input-placeholder {
  color: #999 !important;
  opacity: 1;
}

.zs-1 .txt::-moz-placeholder {
  color: #999 !important;
  opacity: 1;
}

.zs-2 .bt {
  float: left;
  width: 60px;
  height: 100%;
  overflow: hidden;
  background: url("../images/icon-1.png") no-repeat center;
  cursor: pointer;
  border: none;
}

.sz-3 {
  width: 100%;
  margin: 53px auto 0px;
  padding-bottom: 15px;
  overflow: hidden;
}

.sz-3 .h4 {
  width: 1440px;
  overflow: hidden;
  font-size: 24px;
  color: #333;
  font-family: "sybold";
  line-height: 33px;
  border-bottom: 1px #ccc solid;
  padding-bottom: 27px;
  margin: 0px auto;
}

.sz-3 .h4 img {
  float: left;
  margin-right: 15px;
}

.sz-3content {
  width: 1440px;
  display: flex;
  flex-wrap: wrap;
  margin: 10px auto 0px;
}

.sz-3content span {
  width: 18.5%;
  line-height: 44px;
  font-size: 16px;
  color: #666;
}

.sz-3content span a {
  color: #666;
  position: relative;
  font-size: 16px;
  font-family: "syreg";
}

.sz-3content span a:before {
  width: 32px;
  height: 15px;
  line-height: 18px;
  content: "HOT";
  position: absolute;
  right: -38px;
  top: 0px;
  border-radius: 3px;
  background: #ff3c3c;
  font-size: 10px;
  color: #fff;
  text-align: center;
  opacity: 0;
}

.sz-3content span:nth-child(6n) {
  width: 7.5%;
  text-align: right;
}

.sz-3content span a:hover {
  color: #108cee;
}

.sz-3content span.hot a:before {
  opacity: 1;
}

.sz-3 ul {
  width: 1440px;
  margin: 10px auto 0px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sz-3 ul li {
  width: auto;
  line-height: 44px;
}

.sz-3 ul li em {
  width: 100%;
  overflow: hidden;
  font-style: normal;
  font-size: 18px;
  color: #108cee;
  font-family: "symed";
  margin-top: 5px;
}

.sz-3 ul li em a {
  color: #108cee;
}

.sz-3 ul li p {
  width: 100%;
}

.sz-3 ul li p span {
  width: 100%;
  display: block;
  position: relative;
}

.sz-3 ul li p span a {
  color: #666;
  position: relative;
  font-size: 16px;
  font-family: "syreg";
}

.sz-3 ul li p span a:before {
  width: 32px;
  height: 15px;
  content: "";
  position: absolute;
  right: -38px;
  top: 0px;
  border-radius: 3px;
  background: #ff3c3c;
  font-size: 10px;
  color: #fff;
  text-align: center;
  opacity: 0;
  background: url("../images/icon-31.png") no-repeat;
}

.sz-3 ul li p a:hover {
  color: #108cee;
}

.sz-3 ul li p span.hot a:before {
  opacity: 1;
}

.sz-4content {
  width: 1440px;
  margin: 10px auto 0px;
  line-height: 44px;
}

.sz-4left {
  float: left;
  width: 47.6%;
}

.sz-4left em {
  width: 100%;
  overflow: hidden;
  font-style: normal;
  font-size: 18px;
  color: #108cee;
  font-family: "symed";
  margin-top: 5px;
}

.sz-4left em a {
  color: #108cee;
}

.sz-4center {
  float: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.sz-4center p {
  width: auto;
}

.sz-4center p span {
  width: 100%;
  display: block;
}

.sz-4center p span a {
  color: #666;
  position: relative;
  font-size: 16px;
  font-family: "syreg";
}

.sz-4center p span a:before {
  width: 32px;
  height: 15px;
  content: "";
  position: absolute;
  right: -38px;
  top: 0px;
  border-radius: 3px;
  background: #ff3c3c;
  font-size: 10px;
  color: #fff;
  text-align: center;
  opacity: 0;
  background: url("../images/icon-31.png") no-repeat;
}

.sz-4center p a:hover {
  color: #108cee;
}

.sz-4center p span.hot a:before {
  opacity: 1;
}

.sz-4right {
  float: right;
  width: 43%;
  display: flex;
  justify-content: space-between;
}

.sz-4item {
  width: auto;
}

.sz-4item em {
  width: 100%;
  overflow: hidden;
  font-style: normal;
  font-size: 18px;
  color: #108cee;
  font-family: "symed";
  margin-top: 5px;
}

.sz-4item em a {
  color: #108cee;
}

.sz-4item span {
  width: 100%;
  display: block;
  position: relative;
}

.sz-4item span a {
  color: #666;
  position: relative;
  font-size: 16px;
  font-family: "syreg";
}

.sz-4item span a:before {
  width: 32px;
  height: 15px;
  content: "";
  position: absolute;
  right: -38px;
  top: 0px;
  border-radius: 3px;
  background: #ff3c3c;
  font-size: 10px;
  color: #fff;
  text-align: center;
  opacity: 0;
  background: url("../images/icon-31.png") no-repeat;
}

.sz-4item a:hover {
  color: #108cee;
}

.sz-4item span.hot a:before {
  opacity: 1;
}

/*hot-fangan*/

.zs-5 {
  width: 100%;
  overflow: hidden;
  background: #e9ebf5;
  padding: 100px 0px 90px;
}

.zs-5 .h3 {
  width: 100%;
  overflow: hidden;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "symed";
}

.zs-5head {
  width: 510px;
  overflow: hidden;
  height: 50px;
  line-height: 50px;
  margin: 30px auto 0px;
  background: #fff;
  border-radius: 25px;
}

.zs-5head span {
  float: left;
  width: 50%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  font-size: 20px;
  color: #333;
  font-family: "syreg";
  border-radius: 25px;
  cursor: pointer;
}

.zs-5head span.active {
  background: #108cee;
  color: #fff;
}

.zs-5content {
  width: 1440px;
  margin: 38px auto 0px;
  position: relative;
}

.zs-5pannel {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  opacity: 0;
  transform: translateY(40px);
}

.zs-5pannel.active {
  width: 100%;
  position: relative;
  left: 0px;
  top: 0px;
  z-index: 2;
  opacity: 1;
}

.zs-5left {
  float: left;
  width: 32.778%;
}

.zs-5right {
  float: right;
  width: 32.778%;
}

.zs-5item {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px #fff solid;
  height: 190px;
  margin-top: 20px;
  background: -webkit-linear-gradient(top, #eaeff4, #fcfdfe);
  background: -moz-linear-gradient(top, #eaeff4, #fcfdfe);
  background: -ms-linear-gradient(top, #eaeff4, #fcfdfe);
  background: -o-linear-gradient(top, #eaeff4, #fcfdfe);
  box-shadow: 0px 0px 12px 4px rgba(0, 11, 65, 0.09);
  padding: 30px;
}

.zs-5item:hover {
  transform: translateY(-3px);
}

.zs-5item a {
  width: 100%;
  height: 100%;
  display: block;
}

.zs-5item:first-child {
  margin-top: 0px;
}

.zs-5center {
  width: 31.25%;
  overflow: hidden;
  position: relative;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.zs-5center img {
  width: 100%;
  height: auto;
}

.zs-arr {
  width: 10%;
  position: absolute;
  animation: fades 1.5s ease-in infinite alternate;
  opacity: 0;
}

.zs-arr.zs1 {
  left: 0%;
  top: 0%;
}

.zs-arr.zs2 {
  right: 0%;
  top: 0%;
}

.zs-arr.zs3 {
  left: 0%;
  top: 48%;
}

.zs-arr.zs4 {
  right: 0%;
  top: 48%;
}

.zs-arr.zs5 {
  left: 0%;
  bottom: 0%;
}

.zs-arr.zs6 {
  right: 0%;
  bottom: 0%;
}

.zs-5item samp {
  float: left;
  width: 30px;
  height: 30px;
  position: relative;
  overflow: hidden;
}

.zs-5item samp img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.zs-5cont {
  float: right;
  width: calc(100% - 50px);
  overflow: hidden;
}

.zs-5cont span {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 16px;
  color: #333;
  font-family: "symed";
}

.zs-5cont span em {
  font-size: 24px;
  margin-right: 12px;
  font-style: normal;
}

.zs-5info {
  float: left;
  width: 100%;
  overflow: hidden;
  line-height: 24px;
  font-size: 16px;
  color: #999;
  font-family: "syreg";
  margin-top: 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.zs-5cont p {
  float: left;
  width: 100%;
  font-size: 16px;
  color: #0d8dff;
  font-family: "syreg";
  margin-top: 20px;
}

.zs-5cont p:hover {
  transform: translateX(5px);
}

.zs-5pannel.active {
  animation: updown 0.6s ease 1;
  animation-fill-mode: forwards;
}

.zs-6 {
  width: 100%;
  overflow: hidden;
  background: #fff;
  padding: 110px 0px 70px;
}

.zs-6 .h3 {
  width: 100%;
  overflow: hidden;
  text-align: center;
  position: relative;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 30px;
}

.zs-6 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  background: #108cee;
}

.zs-6content {
  width: 1440px;
  margin: 42px auto 0px;
  position: relative;
}

.zs-6item {
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}

.zs-6pic {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #000;
}

.zs-6pic img {
  width: 100%;
  height: auto;
  opacity: 0.6;
}

.zs-6item:hover .zs-6pic img {
  transform: scale(1.02);
}

.zs-6pic span {
  width: 54px;
  height: 54px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url("../images/icon-18.png") no-repeat;
  background-size: 100%;
}

.zs-6bottom {
  float: left;
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
  height: 33px;
  line-height: 33px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 24px;
  color: #333;
  font-family: "symed";
}

.zs-6bottom span {
  width: auto;
  height: 100%;
  border-radius: 5px;
  padding: 0px 13px;
  background: -webkit-linear-gradient(left, #54a1fd, #4ed6c7);
  background: -moz-linear-gradient(left, #54a1fd, #4ed6c7);
  background: -ms-linear-gradient(left, #54a1fd, #4ed6c7);
  background: -o-linear-gradient(left, #54a1fd, #4ed6c7);
  font-size: 14px;
  color: #fff;
  display: inline-block;
  margin-right: 12px;
  vertical-align: top;
}

.zs-6content .swiper-button-prev {
  width: 24px;
  height: 42px;
  background: url("../images/icon-19.png") no-repeat center;
  background-size: 100%;
  left: -50px;
  opacity: 0.5;
  top: 36%;
}

.zs-6content .swiper-button-next {
  width: 24px;
  height: 42px;
  background: url("../images/icon-19.png") no-repeat center;
  background-size: 100%;
  right: -50px;
  opacity: 0.5;
  transform: rotate(180deg);
  top: 36%;
}

.zs-6content .swiper-button-prev:hover,
.zs-6content .swiper-button-next:hover {
  opacity: 1;
}

.zs-6pag {
  width: 100%;
  overflow: hidden;
  margin-top: 56px;
}

.zs-6pag .swiper-pagination {
  width: 100%;
  text-align: center;
}

.zs-6pag .swiper-pagination span {
  width: 11px;
  height: 11px;
  margin: 0px 5px;
  background: #bdccde;
  opacity: 1;
}

.zs-6pag .swiper-pagination .swiper-pagination-bullet-active {
  background: #2a87f9;
}

.zs-7 {
  width: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0px 60px;
}

.zs-7head {
  width: 100%;
  overflow: hidden;
  text-align: center;
  position: relative;
  padding-bottom: 30px;
}

.zs-7head .h3 {
  width: 100%;
  overflow: hidden;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
}

.zs-7info {
  width: 100%;
  overflow: hidden;
  font-size: 20px;
  color: #333;
  font-family: "symed";
}

.zs-7info span {
  color: #419aff;
  font-family: "sybold";
}

.zs-7head:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  background: #108cee;
}

.zs-7content {
  width: 1440px;
  margin: 38px auto 0px;
  position: relative;
}

.zs-7content .swiper-container {
  padding: 7px;
}

.zs-7center {
  float: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.zs-7item {
  width: 48.5%;
  overflow: hidden;
  background: #fff;
  margin-top: 48px;
  box-shadow: 0px 0px 12px 2px rgba(48, 64, 97, 0.05);
  padding: 2vw;
  box-sizing: border-box;
}

.zs-7item:hover {
  transform: translateY(-3px);
}

.zs-7item:nth-child(1),
.zs-7item:nth-child(2) {
  margin-top: 0px;
}

.zs-7item a {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
}

.zs-7item samp {
  width: 16%;
  overflow: hidden;
}

.zs-7item samp img {
  width: 100%;
  height: auto;
}

.zs-7cont {
  width: 77%;
  overflow: hidden;
}

.zs-7cont span {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 26px;
  color: #333;
  font-family: "sybold";
}

.zs-7des {
  float: left;
  width: 100%;
  overflow: hidden;
  line-height: 24px;
  font-size: 16px;
  color: #666;
  font-family: "syreg";
  margin-top: 5px;
}

.zs-7cont em {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 16px;
  color: #419aff;
  font-family: "syreg";
  margin-top: 15px;
  font-style: normal;
}

.zs-7cont em:hover {
  transform: translateX(5px);
}

.zs-7item samp:hover img {
  transform: scale(1.02);
}

.zs-7pag {
  width: 100%;
  overflow: hidden;
  margin-top: 56px;
}

.zs-7pag .swiper-pagination {
  width: 100%;
  text-align: center;
}

.zs-7pag .swiper-pagination span {
  width: 11px;
  height: 11px;
  margin: 0px 5px;
  background: #bdccde;
  opacity: 1;
}

.zs-7pag .swiper-pagination .swiper-pagination-bullet-active {
  background: #2a87f9;
}

.zs-7content .swiper-button-prev {
  width: 24px;
  height: 42px;
  background: url("../images/icon-19.png") no-repeat center;
  background-size: 100%;
  left: -50px;
  opacity: 0.5;
}

.zs-7content .swiper-button-next {
  width: 24px;
  height: 42px;
  background: url("../images/icon-19.png") no-repeat center;
  background-size: 100%;
  right: -50px;
  opacity: 0.5;
  transform: rotate(180deg);
}

.zs-7content .swiper-button-prev:hover,
.zs-7content .swiper-button-next:hover {
  opacity: 1;
}

.zs-7 .zs72 {
  display: none;
}

/*gaishu-banner*/

.banner-ny {
  width: 100%;
  height: 420px;
  overflow: hidden; /*margin-top: 80px;*/
  background: url("../images/banner-1.jpg") no-repeat center;
  position: relative;
}

.banner-center {
  width: 1440px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.banner-center .h3 {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 46px;
  color: #333;
  font-family: "symed";
}

.banner-center p {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 20px;
  color: #333;
  font-family: "syreg";
}

.banner-link {
  float: left;
  width: 100%;
  margin-top: 60px;
}

.banner-link a {
  float: left;
  width: 140px;
  height: 42px;
  line-height: 42px;
  overflow: hidden;
  margin-right: 20px;
  box-sizing: border-box;
  border: 1px #4a80f7 solid;
  text-align: center;
  font-size: 16px;
  color: #4a80f7;
  font-family: "syreg";
}

.banner-link a:nth-child(1) {
  color: #fff;
  background: #4a80f7;
}

.banner-link a:hover {
  transform: translateY(3px);
}

/*gaishu-nav*/

.nav-genner {
  width: 1440px;
  overflow: hidden;
  margin: -45px auto 0px;
  height: 90px;
  line-height: 90px;
  position: relative;
  background: -webkit-linear-gradient(top, #f9fbfc, #fdfefe);
  background: -moz-linear-gradient(top, #f9fbfc, #fdfefe);
  background: -ms-linear-gradient(top, #f9fbfc, #fdfefe);
  background: -o-linear-gradient(top, #f9fbfc, #fdfefe);
  box-shadow: 0px 3px 15px 5px rgba(193, 213, 255, 0.2);
  z-index: 5;
}

.nav-genner:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
  border: 4px #fff solid;
  box-sizing: border-box;
}

.nav-genner ul {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: flex;
}

.nav-genner ul li {
  flex: 1;
  height: 100%;
  text-align: center;
  cursor: pointer;
  font-size: 18px;
  color: #8fa3b8;
  font-family: "symed";
  position: relative;
}

.nav-genner ul li:before {
  width: 0%;
  height: 4px;
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #487dea;
}

.nav-genner ul li.active,
.nav-genner ul li:hover {
  color: #436aba;
}

.nav-genner ul li.active:before,
.nav-genner ul li:hover:before {
  width: 100%;
}

/*gaishu-xianzhuang*/

.gs-1 {
  width: 100%;
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 110px 0px 120px;
}

.gs-1 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 30px;
}

.gs-1 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #108cee;
  transform: translateX(-50%);
}

.gs-1content {
  width: 1440px;
  margin: 40px auto 0px;
  display: flex;
  flex-wrap: wrap;
}

.gs-1item {
  float: left;
  width: 33.33%;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
  padding: 60px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.gs-1item:hover {
  box-shadow: 0px 4px 17px 5px rgba(16, 38, 100, 0.06);
  z-index: 2;
}

.gs-1item samp {
  width: 100%;
  display: block;
  overflow: hidden;
  text-align: center;
  position: relative;
  height: 70px;
}

.gs-1item samp img {
  width: auto;
  height: auto;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.gs-1item span {
  width: 100%;
  display: block;
  overflow: hidden;
  text-align: center;
  font-size: 24px;
  color: #333;
  font-family: "symed";
}

.gs-1item p {
  width: 100%;
  overflow: hidden;
  line-height: 26px;
  font-size: 16px;
  color: #333;
  opacity: 0.7;
  font-family: "syreg";
  margin-top: 4px;
}

.gs-1item:hover samp {
  transform: rotateY(180deg);
}

/*gaishu-gongneng*/

.gs-2 {
  width: 100%;
  overflow: hidden;
  background: -webkit-linear-gradient(top, #f0f5fc, #fff);
  background: -moz-linear-gradient(top, #f0f5fc, #fff);
  background: -ms-linear-gradient(top, #f0f5fc, #fff);
  background: -o-linear-gradient(top, #f0f5fc, #fff);
  padding: 60px 0px 65px;
  position: relative;
}

.gs-2 .particles {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.gs-2 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 17px;
  z-index: 12;
}

.gs-2 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #108cee;
  transform: translateX(-50%);
}

.gs-2head {
  width: 1440px;
  margin: 32px auto 0px;
  height: 146px;
  background: #eaeef8;
  border-radius: 12px;
  position: relative;
  z-index: 10;
}

.gs-2head ul {
  width: 100%;
  height: 100%;
}

.gs-2head ul li {
  float: left;
  width: 25%;
  height: 100%;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.gs-2head ul li:before {
  width: 100%;
  height: 120%;
  content: "";
  position: absolute;
  left: 0px;
  top: -10%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 0px 12px 4px rgba(16, 38, 100, 0.07);
  transform: scale(0);
  opacity: 0;
}

.gs-2head ul li.active:before {
  transform: scale(1);
  opacity: 1;
}

.gs-2head ul li samp {
  width: 100%;
  position: relative;
  z-index: 12;
  height: 64px;
  display: block;
  overflow: hidden;
}

.gs-2head ul li samp img {
  width: auto;
  height: auto;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.gs-2head ul li span {
  width: 100%;
  position: relative;
  z-index: 12;
  display: block;
  overflow: hidden;
  text-align: center;
  font-size: 24px;
  color: #333;
  font-family: "syreg";
}

.gs-2head ul li.active span {
  color: #108cee;
}

.gs-2head ul li.active samp {
  transform: rotateY(180deg);
}

.gs-2content {
  width: 1440px;
  margin: 70px auto 0px;
  position: relative;
  z-index: 10;
}

.gs-2pannel {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  opacity: 0;
  transform: translateY(40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gs-2pannel.active {
  position: relative;
  z-index: 2;
  animation: updown 0.6s ease 1;
  animation-fill-mode: forwards;
}

.gs-2left {
  width: 43.6%;
  overflow: hidden;
}

.gs-2left span {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 36px;
  color: #333;
  font-family: "symed";
}

.gs-2info {
  float: left;
  width: 100%;
  overflow: hidden;
  line-height: 26px;
  font-size: 16px;
  color: #333;
  font-family: "symed";
  margin-top: 16px;
}

.gs-2left ul {
  float: left;
  width: 100%;
  overflow: hidden;
  margin-top: 15px;
}

.gs-2left ul li {
  float: left;
  width: 26%;
  height: 34px;
  line-height: 34px;
  font-size: 16px;
  color: #666;
  font-family: "syreg";
  box-sizing: border-box;
  padding-left: 10px;
  position: relative;
}

.gs-2left ul li:before {
  width: 3px;
  height: 3px;
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #0f8cee;
}

.gs-2left ul li:nth-child(4n) {
  width: 22%;
}

.gs-2left em {
  float: left;
  width: 174px;
  height: 44px;
  line-height: 44px;
  overflow: hidden;
  border-radius: 22px;
  background: #0f8cee;
  margin-top: 40px;
  font-style: normal;
}

.gs-2left em a {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  text-align: center;
  font-size: 16px;
  color: #fff;
  font-family: "syreg";
}

.gs-2left em:hover {
  transform: translateY(-3px);
}

.gs-2right {
  width: 54.86%;
  transform: translateX(4%);
}

.gs-2right img {
  width: 100%;
  height: auto;
}

.gs-2more {
  width: 100%;
  overflow: hidden;
  padding-top: 50px;
  position: relative;
  z-index: 32;
}

.gs-2more a {
  width: 174px;
  height: 44px;
  line-height: 44px;
  overflow: hidden;
  border-radius: 22px;
  background: #e6ecf8;
  display: block;
  margin: 0px auto;
  text-align: center;
  font-size: 16px;
  color: #333;
  font-family: "symed";
}

.gs-2more a:hover {
  transform: translateY(-3px);
}

/*gaishu-guanli*/

.gs-3 {
  width: 100%;
  overflow: hidden;
  background: url("../images/icon-44.png");
  padding: 120px 0px 100px;
}

.gs-3 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #213d7e;
  font-family: "syreg";
  padding-bottom: 27px;
  z-index: 12;
}

.gs-3 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #213d7e;
  transform: translateX(-50%);
}

.gs-3content {
  width: 1440px;
  margin: 40px auto 0px;
  display: flex;
  justify-content: space-between;
}

.gs-3item {
  width: 17%;
  overflow: hidden;
  height: 530px;
  position: relative;
  border-radius: 15px;
  box-sizing: border-box;
  position: relative;
  padding: 50px 20px 0px;
}

.gs-3bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.gs-3item:nth-child(1) {
  background: -webkit-linear-gradient(top, #1e8dff, #2351e5);
  background: -moz-linear-gradient(top, #1e8dff, #2351e5);
  background: -ms-linear-gradient(top, #1e8dff, #2351e5);
  background: -o-linear-gradient(top, #1e8dff, #2351e5);
}

.gs-3item:nth-child(1) em {
  background-image: -webkit-linear-gradient(top, #2164ed 20%, #25a9ff);
  background-image: -moz-linear-gradient(top, #2164ed 20%, #25a9ff);
  background-image: -ms-linear-gradient(top, #2164ed 20%, #25a9ff);
  background-image: -o-linear-gradient(top, #2164ed 20%, #25a9ff);
  background-image: linear-gradient(top, #2164ed 20%, #25a9ff);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -ms-background-clip: text;
  -o-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -ms-text-fill-color: transparent;
  -o-text-fill-color: transparent;
  text-fill-color: transparent;
}

.gs-3item:nth-child(2) {
  background: -webkit-linear-gradient(top, #19cca4, #26d7af);
  background: -moz-linear-gradient(top, #19cca4, #26d7af);
  background: -ms-linear-gradient(top, #19cca4, #26d7af);
  background: -o-linear-gradient(top, #19cca4, #26d7af);
}

.gs-3item:nth-child(2) em {
  background-image: -webkit-linear-gradient(top, #25d6ae 20%, #86edc6);
  background-image: -moz-linear-gradient(top, #25d6ae 20%, #86edc6);
  background-image: -ms-linear-gradient(top, #25d6ae 20%, #86edc6);
  background-image: -o-linear-gradient(top, #25d6ae 20%, #86edc6);
  background-image: linear-gradient(top, #25d6ae 20%, #86edc6);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -ms-background-clip: text;
  -o-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -ms-text-fill-color: transparent;
  -o-text-fill-color: transparent;
  text-fill-color: transparent;
}

.gs-3item:nth-child(3) {
  background: -webkit-linear-gradient(top, #8e64f9, #6635e5);
  background: -moz-linear-gradient(top, #8e64f9, #6635e5);
  background: -ms-linear-gradient(top, #8e64f9, #6635e5);
  background: -o-linear-gradient(top, #8e64f9, #6635e5);
}

.gs-3item:nth-child(3) em {
  background-image: -webkit-linear-gradient(top, #7344eb 20%, #b581ff);
  background-image: -moz-linear-gradient(top, #7344eb 20%, #b581ff);
  background-image: -ms-linear-gradient(top, #7344eb 20%, #b581ff);
  background-image: -o-linear-gradient(top, #7344eb 20%, #b581ff);
  background-image: linear-gradient(top, #7344eb 20%, #b581ff);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -ms-background-clip: text;
  -o-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -ms-text-fill-color: transparent;
  -o-text-fill-color: transparent;
  text-fill-color: transparent;
}

.gs-3item:nth-child(4) {
  background: -webkit-linear-gradient(top, #1dbdff, #24a0f2);
  background: -moz-linear-gradient(top, #1dbdff, #24a0f2);
  background: -ms-linear-gradient(top, #1dbdff, #24a0f2);
  background: -o-linear-gradient(top, #1dbdff, #24a0f2);
}

.gs-3item:nth-child(4) em {
  background-image: -webkit-linear-gradient(top, #24aff8 20%, #6ce4ff);
  background-image: -moz-linear-gradient(top, #24aff8 20%, #6ce4ff);
  background-image: -ms-linear-gradient(top, #24aff8 20%, #6ce4ff);
  background-image: -o-linear-gradient(top, #24aff8 20%, #6ce4ff);
  background-image: linear-gradient(top, #24aff8 20%, #6ce4ff);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -ms-background-clip: text;
  -o-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -ms-text-fill-color: transparent;
  -o-text-fill-color: transparent;
  text-fill-color: transparent;
}

.gs-3item samp {
  float: left;
  width: 100%;
  overflow: hidden;
  height: 51px;
  position: relative;
  z-index: 12;
}

.gs-3item samp img {
  width: auto;
  height: auto;
  max-height: 100%;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}

.gs-3item samp img:last-child {
  opacity: 1;
}

.gs-3item .h4 {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 24px;
  color: #fff;
  font-family: "symed";
  margin-top: 10px;
  position: relative;
  z-index: 12;
}

.gs-3item p {
  float: left;
  width: 100%;
  overflow: hidden;
  line-height: 26px;
  font-size: 16px;
  color: #fff;
  font-family: "syreg";
  margin-top: 6px;
  position: relative;
  z-index: 12;
}

.gs-3item ul {
  float: left;
  width: 100%;
  overflow: hidden;
  margin-top: 6px;
  position: relative;
  z-index: 12;
  max-height: 0px;
}

.gs-3item ul li {
  float: left;
  width: 100%;
  overflow: hidden;
  line-height: 26px;
  position: relative;
  box-sizing: border-box;
  padding-left: 14px;
  font-size: 16px;
  color: #fff;
  font-family: "symed";
  margin-top: 6px;
}

.gs-3item ul li:before {
  width: 4px;
  height: 4px;
  content: "";
  position: absolute;
  left: 0px;
  top: 9px;
  border-radius: 50%;
  background: #fff;
}

.gs-3item span {
  float: left;
  width: 100%;
  overflow: hidden;
  margin-top: 30px;
  position: relative;
  z-index: 12;
  opacity: 0;
}

.gs-3item span a {
  font-size: 16px;
  color: #fff;
  font-family: "symed";
}

.gs-3item em {
  width: auto;
  position: absolute;
  right: -8px;
  bottom: 0px;
  font-family: "bahnschrift";
  font-size: 200px;
  font-style: normal;
  z-index: 12;
}

.gs-3item.active {
  width: 43.6%;
  padding: 50px 40px 0px;
}

.gs-3item.active .gs-3bg {
  opacity: 1;
}

.gs-3item.active samp img {
  opacity: 1;
}

.gs-3item.active samp img:last-child {
  opacity: 0;
}

.gs-3item.active .h4 {
  color: #333;
}

.gs-3item.active p {
  color: #333;
  opacity: 0;
  max-height: 0px;
}

.gs-3item.active ul {
  margin-top: 6px;
  max-height: 1200px;
}

.gs-3item.active ul li {
  color: #666;
}

.gs-3item.active ul li:before {
  background: #666;
}

.gs-3item.active span {
  opacity: 1;
}

.gs-3item.active span a {
  color: #0f8cee;
}

.gs-3item.active em {
  opacity: 0 !important;
}

.gs-3item span:hover {
  transform: translateY(4px);
}

/*gs-changjing*/

.gs-4 {
  width: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 120px 0px 140px;
}

.gs-4 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 27px;
  z-index: 12;
}

.gs-4 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #108cee;
  transform: translateX(-50%);
}

.gs-4content {
  width: 1440px;
  margin: 46px auto 0px;
  display: flex;
  justify-content: space-between;
}

.gs-4item {
  width: 46.6%;
  height: 370px;
  float: left;
  position: relative;
}

.gs-4item:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1;
  background: #cad5e5;
  opacity: 0.3;
}

.gs-4bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
  overflow: hidden;
}

.gs-4item:hover:before {
  opacity: 0.6;
}

.gs-4item .h4 {
  width: 86%;
  overflow: hidden;
  margin: 38px auto 0px;
  font-size: 26px;
  color: #333;
  font-family: "symed";
  position: relative;
  z-index: 12;
}

.gs-4item p {
  width: 86%;
  overflow: hidden;
  margin: 20px auto 0px;
  line-height: 26px;
  min-height: 52px;
  font-size: 16px;
  color: #333;
  font-family: "symed";
  position: relative;
  z-index: 12;
}

.gs-4item ul {
  width: 86%;
  overflow: hidden;
  position: relative;
  z-index: 12;
  margin: 8px auto 0px;
  padding-right: 20%;
  box-sizing: border-box;
}

.gs-4item ul li {
  float: left;
  width: auto;
  min-width: 130px;
  box-sizing: border-box;
  padding-left: 15px;
  font-size: 16px;
  color: #666;
  font-family: "syreg";
  margin-top: 12px;
  position: relative;
}

.gs-4item ul li:before {
  width: 4px;
  height: 4px;
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  background: #0f8cee;
  border-radius: 50%;
}

.gs-4item span {
  width: 174px;
  height: 42px;
  line-height: 42px;
  overflow: hidden;
  display: block;
  position: absolute;
  left: 12%;
  bottom: 40px;
  z-index: 12;
  border-radius: 21px;
  background: #0f8cee;
}

.gs-4item span a {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  text-align: center;
  font-size: 16px;
  color: #fff;
  font-family: "syreg";
}

.gs-4item span:hover {
  transform: translateY(5px);
}

/*gs-lilngyu*/

.gs-5 {
  width: 100%;
  overflow: hidden;
  background: url("../images/icon-51.png") no-repeat top center;
}

.gs-5head {
  width: 100%;
  overflow: hidden;
}

.gs-5head .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #fff;
  font-family: "syreg";
  padding-bottom: 24px;
  z-index: 12;
  margin-top: 70px;
}

.gs-5head .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #fff;
  transform: translateX(-50%);
}

.gs-5content {
  width: 1440px;
  margin: 280px auto 0px;
  position: relative;
}

.gs-5pic {
  width: 100%;
  overflow: hidden;
}

.gs-5pic img {
  width: 100%;
  height: auto;
}

.gs-5item {
  position: absolute;
  z-index: 12;
  width: 204px;
}

.gs-5top {
  width: 100%;
}

.gs-5top span {
  float: left;
  width: 100%;
  text-align: center;
  font-size: 24px;
  color: #fff;
  font-family: "symed";
}

.gs-5top p {
  float: left;
  width: 110%;
  text-align: center;
  font-size: 16px;
  color: #fff;
  font-family: "symed";
  margin-left: -5%;
  margin-top: 4px;
}

.gs-5top samp {
  float: left;
  width: 100%;
  text-align: center;
  margin-top: 14px;
}

.gs-5bottom {
  width: 100%;
  overflow: hidden;
}

.gs-51 {
  width: 100%;
  overflow: hidden;
  background: url("../images/icon-55.png") no-repeat;
  height: 115px;
}

.gs-52 {
  width: 100%;
  overflow: hidden;
  background: url("../images/icon-56.png") repeat-y;
  height: 0px;
  position: relative;
}

.gs-52 img {
  width: 42%;
  height: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  opacity: 0;
  -webkit-transition: all 0.5s ease 0.2s;
  -moz-transition: all 0.5s ease 0.2s;
  -ms-transition: all 0.5s ease 0.2s;
  -o-transition: all 0.5s ease 0.2s;
  transition: all 0.5s ease 0.2s;
}

.gs-53 {
  width: 100%;
  overflow: hidden;
  background: url("../images/icon-54.png") no-repeat;
  height: 74px;
}

.gs-5item:hover .gs-52 {
  height: 80px;
}

.gs-5item:hover .gs-52 img {
  opacity: 1;
}

.gs-5item.item1 {
  left: 5%;
  bottom: 45%;
}

.gs-5item.item2 {
  left: 20%;
  bottom: 19%;
}

.gs-5item.item2 .gs-5top p {
  width: 70%;
  margin-left: 15%;
}

.gs-5item.item3 {
  left: 32%;
  bottom: 80%;
}

.gs-5item.item4 {
  right: 32%;
  bottom: 80%;
}

.gs-5item.item5 {
  right: 20%;
  bottom: 19%;
}

.gs-5item.item6 {
  right: 5%;
  bottom: 45%;
}

/*gs-case*/

.gs-6 {
  width: 100%;
  overflow: hidden;
  padding: 130px 0px 106px;
}

.gs-6 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 24px;
  z-index: 12;
}

.gs-6 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #108cee;
  transform: translateX(-50%);
}

.gs-6content {
  width: 1440px;
  margin: 17px auto 0px;
  position: relative;
}

.gs-6content .swiper-container {
  width: 100%;
  padding: 16px;
  margin-left: -16px;
}

.gs-6item {
  width: 100%;
  overflow: hidden;
  box-shadow: 0px 4px 10px 4px rgba(37, 118, 228, 0.1);
}

.gs-6top {
  width: 100%;
  height: 15.6vw;
  overflow: hidden;
  position: relative;
}

.gs-6top samp {
  width: 100%;
  height: 100%;
  display: block;
}

.gs-6top samp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-6top:hover samp img {
  transform: scale(1.04);
}

.gs-6top span {
  width: auto;
  height: 30px;
  line-height: 30px;
  padding: 0px 18px;
  text-align: center;
  position: absolute;
  left: 10px;
  top: 10px;
  background: #a1a3bc;
  font-size: 14px;
  color: #fff;
  font-family: "symed";
  border-radius: 15px;
}

.gs-6top em {
  width: auto;
  height: 40px;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 8px;
  font-style: normal;
  font-size: 16px;
  color: #333;
  font-family: "syreg";
  cursor: pointer;
}

.gs-6top em img {
  vertical-align: middle;
  margin-right: 8px;
}

.gs-6bottom {
  width: 100%;
  overflow: hidden;
  padding-bottom: 38px;
}

.gs-6title {
  width: 92%;
  overflow: hidden;
  margin: 18px auto 0px;
}

.gs-6title samp {
  float: left;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  box-sizing: border-box;
  background: #fff;
  border: 2px #e4e7ee solid;
  position: relative;
}

.gs-6title samp img {
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 70%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.gs-6title span {
  float: right;
  width: calc(100% - 60px);
  overflow: hidden;
  height: 50px;
  line-height: 50px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 24px;
  color: #333;
  font-family: "sybold";
}

.gs-6info {
  width: 92%;
  overflow: hidden;
  margin: 12px auto 0px;
  line-height: 24px;
  height: 48px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 16px;
  color: #333;
  font-family: "symed";
}

.gs-6cont {
  width: 92%;
  overflow: hidden;
  margin: 20px auto 0px;
  height: 40px;
  position: relative;
}

.gs-6cont ul {
  width: 100%;
  overflow: hidden;
  line-height: 40px;
}

.gs-6cont ul li {
  float: left;
  width: auto;
  overflow: hidden;
  padding-left: 11px;
  font-size: 16px;
  color: #999;
  font-family: "syreg";
  margin-right: 22px;
  position: relative;
}

.gs-6cont ul li:before {
  width: 4px;
  height: 4px;
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #0f8cee;
}

.gs-6cont span {
  width: 160px;
  overflow: hidden;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  border: 1px #fff solid;
  border-radius: 20px;
  position: absolute;
  left: 0%;
  top: 40px;
  opacity: 0;
  cursor: pointer;
}

.gs-6cont span a {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  text-align: center;
  font-size: 16px;
  color: #fff;
  font-family: "syreg";
}

.gs-6item:hover {
  background: #065fd0;
  box-shadow: none;
}

.gs-6item:hover .gs-6cont ul {
  opacity: 0;
  transform: translateY(-50px);
}

.gs-6item:hover .gs-6cont span {
  opacity: 1;
  top: 0px;
}

.gs-6item:hover .gs-6title samp {
  margin-left: -50px;
}

.gs-6item:hover .gs-6title span {
  margin-right: 50px;
  color: #fff;
}

.gs-6item:hover .gs-6info {
  color: #fff;
}

.gs-6content .swiper-button-prev {
  width: 55px;
  height: 55px;
  background: #dee6f5 url("../images/icon-49.png") no-repeat center;
  left: -95px;
  border-radius: 50%;
  opacity: 1;
}

.gs-6content .swiper-button-next {
  width: 55px;
  height: 55px;
  background: #dee6f5 url("../images/icon-49.png") no-repeat center;
  right: -95px;
  transform: rotate(180deg);
  border-radius: 50%;
  opacity: 1;
}

.gs-6content .swiper-button-prev:hover,
.gs-6content .swiper-button-next:hover {
  opacity: 0.7;
}

.gs-6more {
  width: 100%;
  overflow: hidden;
  padding-top: 50px;
  position: relative;
  z-index: 32;
}

.gs-6more a {
  width: 174px;
  height: 44px;
  line-height: 44px;
  overflow: hidden;
  border-radius: 22px;
  background: #f0f0f0;
  display: block;
  margin: 0px auto;
  text-align: center;
  font-size: 16px;
  color: #666;
  font-family: "symed";
}

.gs-6more a:hover {
  transform: translateY(-3px);
}

/*gs-xiazai*/

.gs-7 {
  width: 100%;
  overflow: hidden;
  padding: 70px 0px 90px;
  background: #f0f5fe;
  border-bottom: 1px #2a50ce solid;
}

.gs-7 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 24px;
  z-index: 12;
}

.gs-7 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #108cee;
  transform: translateX(-50%);
}

.gs-7content {
  width: 1440px;
  overflow: hidden;
  margin: 43px auto 0px;
  display: flex;
  justify-content: space-between;
}

.gs-7item {
  width: 32.43%;
  overflow: hidden;
  position: relative;
}

.gs-7item img {
  float: left;
  width: 100%;
  height: auto;
}

.gs-7item:hover img {
  transform: scale(1.03);
}

.gs-7center {
  width: 86%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
}

.gs-7center span {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 36px;
  color: #fff;
  font-family: "symed";
}

.gs-7center em {
  float: left;
  width: 140px;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  border-radius: 24px;
  background: -webkit-linear-gradient(top, #eef3ff, #9dbcff);
  background: -moz-linear-gradient(top, #eef3ff, #9dbcff);
  background: -ms-linear-gradient(top, #eef3ff, #9dbcff);
  background: -o-linear-gradient(top, #eef3ff, #9dbcff);
  margin-top: 30px;
  font-style: normal;
  text-align: center;
  font-size: 18px;
  color: #0066fe;
  font-family: "symed";
}

.gs-7center em:hover {
  transform: translateY(4px);
}

/*cj-1*/

.cj-1 {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: -webkit-linear-gradient(top, #eef3fc, #fff);
  background: -moz-linear-gradient(top, #eef3fc, #fff);
  background: -ms-linear-gradient(top, #eef3fc, #fff);
  background: -o-linear-gradient(top, #eef3fc, #fff);
  z-index: 2;
  margin-top: -50px;
  padding: 160px 0px 60px;
}

.cj-1 .particles {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.cj-1 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 16px;
  z-index: 12;
}

.cj-1 .h3:before {
  width: 40px;
  height: 4px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #4a80f7;
  transform: translateX(-50%);
  border-radius: 2px;
}

.cj-1head {
  width: 1440px;
  margin: 55px auto 0px;
  height: 146px;
  background: #eaeef8;
  border-radius: 12px;
  position: relative;
  z-index: 32;
}

.cj-1head ul {
  width: 100%;
  height: 100%;
}

.cj-1head ul li {
  float: left;
  width: 20%;
  height: 100%;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.cj-1head ul li:before {
  width: 100%;
  height: 120%;
  content: "";
  position: absolute;
  left: 0px;
  top: -10%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 0px 12px 4px rgba(16, 38, 100, 0.07);
  transform: scale(0);
  opacity: 0;
}

.cj-1head ul li.active:before {
  transform: scale(1);
  opacity: 1;
}

.cj-1head ul li samp {
  width: 100%;
  position: relative;
  z-index: 12;
  height: 64px;
  display: block;
  overflow: hidden;
}

.cj-1head ul li samp img {
  width: auto;
  height: auto;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cj-1head ul li span {
  width: 100%;
  position: relative;
  z-index: 12;
  display: block;
  overflow: hidden;
  text-align: center;
  font-size: 24px;
  color: #333;
  font-family: "syreg";
}

.cj-1head ul li.active span {
  color: #108cee;
}

.cj-1head ul li.active samp {
  transform: rotateY(180deg);
}

.cj-1content {
  width: 1440px;
  margin: 70px auto 0px;
  position: relative;
  z-index: 32;
}

.cj-1pannel {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  opacity: 0;
  transform: translateY(40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cj-1pannel.active {
  position: relative;
  z-index: 2;
  animation: updown 0.6s ease 1;
  animation-fill-mode: forwards;
}

.cj-1pannel .gs-2right {
  width: 46.5%;
  transform: translateX(0%);
}

.cj-1pannel .gs-2left ul li:nth-child(4n),
.cj-1pannel .gs-2left ul li {
  width: 31%;
}

/*cj-2*/

.cj-2 {
  width: 100%;
  overflow: hidden;
  background: #eef3f9;
  padding: 90px 0px 110px;
  border-bottom: 1px #2a50ce solid;
}

.cj-2 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 24px;
  z-index: 12;
}

.cj-2 .h3:before {
  width: 40px;
  height: 4px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #333;
  transform: translateX(-50%);
  border-radius: 2px;
}

.cj-2content {
  width: 1440px;
  overflow: hidden;
  margin: 40px auto 0px;
  display: flex;
  justify-content: space-between;
}

.cj-2item {
  width: 48.6%;
  overflow: hidden;
  position: relative;
}

.cj-2item img {
  float: left;
  width: 100%;
  height: auto;
}

.cj-2item:hover img {
  transform: scale(1.04);
}

.cj-2center {
  width: 86%;
  position: absolute;
  height: 70%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.cj-2center span {
  float: left;
  width: 100%;
  font-size: 36px;
  font-family: "symed";
}

.cj-2center p {
  float: left;
  width: 100%;
  font-size: 16px;
  font-family: "syreg";
  line-height: 26px;
  margin-top: 4px;
  box-sizing: border-box;
  padding-right: 23%;
}

.cj-2center em {
  width: 160px;
  height: 43px;
  line-height: 43px;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  position: absolute;
  left: 0px;
  bottom: 0px;
  font-style: normal;
}

.cj-2center em a {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  text-align: center;
  font-size: 16px;
  color: #333;
  font-family: "syreg";
}

.cj-2center em:hover {
  transform: translateY(3px);
}

/*gongnengyingyong-1*/

.yy-1 {
  width: 100%;
  overflow: hidden;
  padding: 120px 0px 86px;
}

.yy-1 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 24px;
  z-index: 12;
}

.yy-1 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #108cee;
  transform: translateX(-50%);
}

.yy-1pic {
  width: 1440px;
  overflow: hidden;
  margin: 46px auto 0px;
}

.yy-1pic img {
  width: 100%;
  height: auto;
}

.yy-1more {
  width: 174px;
  height: 44px;
  line-height: 44px;
  overflow: hidden;
  margin: 50px auto 0px;
  border: 1px #a0a0a0 solid;
  box-sizing: border-box;
  border-radius: 22px;
}

.yy-1more a {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 16px;
  color: #999;
  font-family: "syreg";
  display: block;
}

.yy-1more:hover {
  background: #a0a0a0;
}

.yy-1more:hover a {
  color: #333;
}

/*gongnengyingyong-2*/

.yy-2 {
  margin-top: 0px;
}

.yy-2 ul li {
  width: 10%;
}

.yy-2 ul li span {
  font-size: 16px;
}

.yy-2 .cj-1head ul li span {
  margin-top: 8px;
}

/*gongnengyingyong-3*/

.yy-3 {
  width: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 120px 0px 130px;
}

.yy-3 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #fff;
  font-family: "syreg";
  padding-bottom: 24px;
  z-index: 12;
}

.yy-3 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #fff;
  transform: translateX(-50%);
}

.yy-3content {
  width: 1440px;
  overflow: hidden;
  margin: 16px auto 0px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.yy-3item {
  width: 48.7%;
  overflow: hidden;
  margin-top: 40px;
  border: 2px #fff solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 160px;
  box-sizing: border-box;
  padding: 0px 36px 0px 32px;
}

.yy-3item samp {
  width: 120px;
  display: block;
  overflow: hidden;
}

.yy-3center {
  width: 340px;
  overflow: hidden;
}

.yy-3center span {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 26px;
  color: #fff;
  font-family: "syreg";
}

.yy-3center p {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 16px;
  color: #fff;
  font-family: "syreg";
  margin-top: 10px;
}

.yy-3item a {
  width: 109px;
  display: block;
  overflow: hidden;
  height: 38px;
  line-height: 38px;
  border: 1px #fff solid;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  font-family: "syreg";
}

.yy-3item a:hover {
  background: #fff;
  color: #1c3455;
}

/*video-2*/

.vd-1 {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 80px 0px;
}

.vd-1 .h3 {
  width: 100%;
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 80px;
  text-align: center;
  font-size: 36px;
  color: #333;
  font-family: "syreg";
  z-index: 12;
}

.vd-1content {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.vd-1cir {
  width: 821px;
  height: 821px;
  margin: 15px auto 0px;
  position: relative;
}

.vd-1cir:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-84.png") no-repeat;
  background-size: 100%;
  animation: zhuanquan 60s linear infinite;
}

.vd-1cir:after {
  width: 88%;
  height: 88%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px #dfedfd solid;
  border-radius: 50%;
}

.vd-1cir span {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
}

.vd-1cir span:after {
  width: 78%;
  height: 78%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px #c3ddfc solid;
  border-radius: 50%;
}

.vd-1cir span:before {
  width: 68%;
  height: 68%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px #5da3f7 solid;
  border-radius: 50%;
}

.vd-1video {
  width: 60%;
  height: 60%;
  position: absolute;
  overflow: hidden;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 20;
}

.vd-1pannel {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
  background: #000;
}

.vd-1pannel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
}

.vd-1pannel.active {
  opacity: 1;
  z-index: 12;
}

.vd-1pannel:before {
  width: 60px;
  height: 60px;
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  background: #fff url("../images/icon-18.png") no-repeat;
  background-size: 100%;
  opacity: 0.8;
  border-radius: 50%;
}

.vd-1pannel:hover:before {
  opacity: 1;
}

.vd-1pannel:hover img {
  transform: scale(1.04);
}

.vd-1item1 {
  width: 450px;
  position: absolute;
  left: -249px;
  top: 160px;
  z-index: 30;
  cursor: pointer;
}

.vd-1item1 samp {
  width: 70px;
  height: 70px;
  float: left;
  box-sizing: border-box;
  border: 2px #437dbf solid;
  border-radius: 50%;
  position: relative;
}

.vd-1item1 samp:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85.png") no-repeat;
  background-size: 100%;
}

.vd-1item1 samp:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85-1.png") no-repeat;
  background-size: 100%;
  opacity: 0;
}

.vd-1item1 samp img {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.vd-1item1 samp img:last-child {
  opacity: 0;
}

.vd-1item1 h4 {
  float: left;
  width: auto;
  line-height: 70px;
  font-size: 24px;
  color: #333;
  font-family: "symed";
  margin-left: 20px;
}

.vd-1item1 em {
  float: left;
  width: 234px;
  height: 57px;
  overflow: hidden;
  position: relative;
  margin: 32px 0px 0px 15px;
  z-index: 12;
}

.vd-1item1 em:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-94.png") no-repeat;
  opacity: 0;
}

.vd-1item1 em:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-95.png") no-repeat;
}

.vd-1item1 p {
  width: 12px;
  height: 12px;
  position: absolute;
  right: 9px;
  bottom: -4px;
  z-index: 11;
}

.vd-1item1 p i {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  background: #a5c9f7;
  border-radius: 50%;
  z-index: 10;
}

.vd-1item1 p:before {
  width: 180%;
  height: 180%;
  content: "";
  border-radius: 50%;
  border: 1px #a9cbf7 solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 9;
}

.vd-1item1 p:after {
  width: 290%;
  height: 290%;
  content: "";
  border-radius: 50%;
  border: 1px #d2e4fb solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

.vd-1item2 {
  width: 450px;
  position: absolute;
  left: -299px;
  top: 295px;
  z-index: 30;
  cursor: pointer;
}

.vd-1item2 samp {
  width: 70px;
  height: 70px;
  float: left;
  box-sizing: border-box;
  border: 2px #437dbf solid;
  border-radius: 50%;
  position: relative;
}

.vd-1item2 samp:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85.png") no-repeat;
  background-size: 100%;
}

.vd-1item2 samp:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85-1.png") no-repeat;
  background-size: 100%;
  opacity: 0;
}

.vd-1item2 samp img {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.vd-1item2 samp img:last-child {
  opacity: 0;
}

.vd-1item2 h4 {
  float: left;
  width: auto;
  line-height: 70px;
  font-size: 24px;
  color: #333;
  font-family: "symed";
  margin-left: 20px;
}

.vd-1item2 em {
  float: left;
  width: 245px;
  height: 20px;
  overflow: hidden;
  position: relative;
  margin: 23px 0px 0px 15px;
  z-index: 12;
}

.vd-1item2 em:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-96.png") no-repeat center;
  opacity: 0;
}

.vd-1item2 em:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-97.png") no-repeat center;
}

.vd-1item2 p {
  width: 12px;
  height: 12px;
  position: absolute;
  right: -1px;
  bottom: 31px;
  z-index: 11;
}

.vd-1item2 p i {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  background: #a5c9f7;
  border-radius: 50%;
  z-index: 10;
}

.vd-1item2 p:before {
  width: 180%;
  height: 180%;
  content: "";
  border-radius: 50%;
  border: 1px #a9cbf7 solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 9;
}

.vd-1item2 p:after {
  width: 290%;
  height: 290%;
  content: "";
  border-radius: 50%;
  border: 1px #d2e4fb solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

.vd-1item3 {
  width: 450px;
  position: absolute;
  left: -299px;
  top: 460px;
  z-index: 30;
  cursor: pointer;
}

.vd-1item3 samp {
  width: 70px;
  height: 70px;
  float: left;
  box-sizing: border-box;
  border: 2px #437dbf solid;
  border-radius: 50%;
  position: relative;
}

.vd-1item3 samp:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85.png") no-repeat;
  background-size: 100%;
}

.vd-1item3 samp:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85-1.png") no-repeat;
  background-size: 100%;
  opacity: 0;
}

.vd-1item3 samp img {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.vd-1item3 samp img:last-child {
  opacity: 0;
}

.vd-1item3 h4 {
  float: left;
  width: auto;
  line-height: 70px;
  font-size: 24px;
  color: #333;
  font-family: "symed";
  margin-left: 20px;
}

.vd-1item3 em {
  float: left;
  width: 245px;
  height: 20px;
  overflow: hidden;
  position: relative;
  margin: 23px 0px 0px 15px;
  z-index: 12;
}

.vd-1item3 em:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-96.png") no-repeat center;
  opacity: 0;
}

.vd-1item3 em:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-97.png") no-repeat center;
}

.vd-1item3 p {
  width: 12px;
  height: 12px;
  position: absolute;
  right: -1px;
  bottom: 31px;
  z-index: 11;
}

.vd-1item3 p i {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  background: #a5c9f7;
  border-radius: 50%;
  z-index: 10;
}

.vd-1item3 p:before {
  width: 180%;
  height: 180%;
  content: "";
  border-radius: 50%;
  border: 1px #a9cbf7 solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 9;
}

.vd-1item3 p:after {
  width: 290%;
  height: 290%;
  content: "";
  border-radius: 50%;
  border: 1px #d2e4fb solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

.vd-1item4 {
  width: 450px;
  position: absolute;
  left: -249px;
  top: 590px;
  z-index: 30;
  cursor: pointer;
}

.vd-1item4 samp {
  width: 70px;
  height: 70px;
  float: left;
  box-sizing: border-box;
  border: 2px #437dbf solid;
  border-radius: 50%;
  position: relative;
}

.vd-1item4 samp:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85.png") no-repeat;
  background-size: 100%;
}

.vd-1item4 samp:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85-1.png") no-repeat;
  background-size: 100%;
  opacity: 0;
}

.vd-1item4 samp img {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.vd-1item4 samp img:last-child {
  opacity: 0;
}

.vd-1item4 h4 {
  float: left;
  width: auto;
  line-height: 70px;
  font-size: 24px;
  color: #333;
  font-family: "symed";
  margin-left: 20px;
}

.vd-1item4 em {
  float: left;
  width: 234px;
  height: 57px;
  overflow: hidden;
  position: relative;
  margin: -17px 0px 0px 15px;
  z-index: 12;
  transform: rotateX(180deg);
}

.vd-1item4 em:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-94.png") no-repeat;
  opacity: 0;
}

.vd-1item4 em:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-95.png") no-repeat;
}

.vd-1item4 p {
  width: 12px;
  height: 12px;
  position: absolute;
  right: 9px;
  bottom: 79px;
  z-index: 11;
}

.vd-1item4 p i {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  background: #a5c9f7;
  border-radius: 50%;
  z-index: 10;
}

.vd-1item4 p:before {
  width: 180%;
  height: 180%;
  content: "";
  border-radius: 50%;
  border: 1px #a9cbf7 solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 9;
}

.vd-1item4 p:after {
  width: 290%;
  height: 290%;
  content: "";
  border-radius: 50%;
  border: 1px #d2e4fb solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

.vd-1item5 {
  width: 450px;
  position: absolute;
  right: -249px;
  top: 160px;
  z-index: 30;
  cursor: pointer;
}

.vd-1item5 samp {
  width: 70px;
  height: 70px;
  float: right;
  box-sizing: border-box;
  border: 2px #437dbf solid;
  border-radius: 50%;
  position: relative;
}

.vd-1item5 samp:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85.png") no-repeat;
  background-size: 100%;
}

.vd-1item5 samp:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85-1.png") no-repeat;
  background-size: 100%;
  opacity: 0;
}

.vd-1item5 samp img {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.vd-1item5 samp img:last-child {
  opacity: 0;
}

.vd-1item5 h4 {
  float: right;
  width: auto;
  line-height: 70px;
  font-size: 24px;
  color: #333;
  font-family: "symed";
  margin-right: 20px;
}

.vd-1item5 em {
  float: right;
  width: 234px;
  height: 57px;
  overflow: hidden;
  position: relative;
  margin: 32px 15px 0px 0px;
  z-index: 12;
  transform: rotateY(180deg);
}

.vd-1item5 em:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-94.png") no-repeat;
  opacity: 0;
}

.vd-1item5 em:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-95.png") no-repeat;
}

.vd-1item5 p {
  width: 12px;
  height: 12px;
  position: absolute;
  left: 9px;
  bottom: -4px;
  z-index: 11;
}

.vd-1item5 p i {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  background: #a5c9f7;
  border-radius: 50%;
  z-index: 10;
}

.vd-1item5 p:before {
  width: 180%;
  height: 180%;
  content: "";
  border-radius: 50%;
  border: 1px #a9cbf7 solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 9;
}

.vd-1item5 p:after {
  width: 290%;
  height: 290%;
  content: "";
  border-radius: 50%;
  border: 1px #d2e4fb solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

.vd-1item6 {
  width: 450px;
  position: absolute;
  right: -299px;
  top: 295px;
  z-index: 30;
  cursor: pointer;
}

.vd-1item6 samp {
  width: 70px;
  height: 70px;
  float: right;
  box-sizing: border-box;
  border: 2px #437dbf solid;
  border-radius: 50%;
  position: relative;
}

.vd-1item6 samp:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85.png") no-repeat;
  background-size: 100%;
}

.vd-1item6 samp:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85-1.png") no-repeat;
  background-size: 100%;
  opacity: 0;
}

.vd-1item6 samp img {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.vd-1item6 samp img:last-child {
  opacity: 0;
}

.vd-1item6 h4 {
  float: right;
  width: auto;
  line-height: 70px;
  font-size: 24px;
  color: #333;
  font-family: "symed";
  margin-right: 20px;
}

.vd-1item6 em {
  float: right;
  width: 245px;
  height: 20px;
  overflow: hidden;
  position: relative;
  margin: 23px 15px 0px 0px;
  z-index: 12;
  transform: rotateY(180deg);
}

.vd-1item6 em:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-96.png") no-repeat center;
  opacity: 0;
}

.vd-1item6 em:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-97.png") no-repeat center;
}

.vd-1item6 p {
  width: 12px;
  height: 12px;
  position: absolute;
  left: -1px;
  bottom: 31px;
  z-index: 11;
}

.vd-1item6 p i {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  background: #a5c9f7;
  border-radius: 50%;
  z-index: 10;
}

.vd-1item6 p:before {
  width: 180%;
  height: 180%;
  content: "";
  border-radius: 50%;
  border: 1px #a9cbf7 solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 9;
}

.vd-1item6 p:after {
  width: 290%;
  height: 290%;
  content: "";
  border-radius: 50%;
  border: 1px #d2e4fb solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

.vd-1item7 {
  width: 450px;
  position: absolute;
  right: -299px;
  top: 460px;
  z-index: 30;
  cursor: pointer;
}

.vd-1item7 samp {
  width: 70px;
  height: 70px;
  float: right;
  box-sizing: border-box;
  border: 2px #437dbf solid;
  border-radius: 50%;
  position: relative;
}

.vd-1item7 samp:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85.png") no-repeat;
  background-size: 100%;
}

.vd-1item7 samp:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85-1.png") no-repeat;
  background-size: 100%;
  opacity: 0;
}

.vd-1item7 samp img {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.vd-1item7 samp img:last-child {
  opacity: 0;
}

.vd-1item7 h4 {
  float: right;
  width: auto;
  line-height: 70px;
  font-size: 24px;
  color: #333;
  font-family: "symed";
  margin-right: 20px;
}

.vd-1item7 em {
  float: right;
  width: 245px;
  height: 20px;
  overflow: hidden;
  position: relative;
  margin: 23px 15px 0px 0px;
  z-index: 12;
  transform: rotateY(180deg);
}

.vd-1item7 em:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-96.png") no-repeat center;
  opacity: 0;
}

.vd-1item7 em:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-97.png") no-repeat center;
}

.vd-1item7 p {
  width: 12px;
  height: 12px;
  position: absolute;
  left: -1px;
  bottom: 31px;
  z-index: 11;
}

.vd-1item7 p i {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  background: #a5c9f7;
  border-radius: 50%;
  z-index: 10;
}

.vd-1item7 p:before {
  width: 180%;
  height: 180%;
  content: "";
  border-radius: 50%;
  border: 1px #a9cbf7 solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 9;
}

.vd-1item7 p:after {
  width: 290%;
  height: 290%;
  content: "";
  border-radius: 50%;
  border: 1px #d2e4fb solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

.vd-1item8 {
  width: 450px;
  position: absolute;
  right: -249px;
  top: 590px;
  z-index: 30;
  cursor: pointer;
}

.vd-1item8 samp {
  width: 70px;
  height: 70px;
  float: right;
  box-sizing: border-box;
  border: 2px #437dbf solid;
  border-radius: 50%;
  position: relative;
}

.vd-1item8 samp:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85.png") no-repeat;
  background-size: 100%;
}

.vd-1item8 samp:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-85-1.png") no-repeat;
  background-size: 100%;
  opacity: 0;
}

.vd-1item8 samp img {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.vd-1item8 samp img:last-child {
  opacity: 0;
}

.vd-1item8 h4 {
  float: right;
  width: auto;
  line-height: 70px;
  font-size: 24px;
  color: #333;
  font-family: "symed";
  margin-right: 20px;
}

.vd-1item8 em {
  float: right;
  width: 234px;
  height: 57px;
  overflow: hidden;
  position: relative;
  margin: -17px 15px 0px 0px;
  z-index: 12;
  transform: rotate(180deg);
}

.vd-1item8 em:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-94.png") no-repeat;
  opacity: 0;
}

.vd-1item8 em:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("../images/icon-95.png") no-repeat;
}

.vd-1item8 p {
  width: 12px;
  height: 12px;
  position: absolute;
  left: 9px;
  bottom: 79px;
  z-index: 11;
}

.vd-1item8 p i {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  background: #a5c9f7;
  border-radius: 50%;
  z-index: 10;
}

.vd-1item8 p:before {
  width: 180%;
  height: 180%;
  content: "";
  border-radius: 50%;
  border: 1px #a9cbf7 solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 9;
}

.vd-1item8 p:after {
  width: 290%;
  height: 290%;
  content: "";
  border-radius: 50%;
  border: 1px #d2e4fb solid;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

.vd-1content .item.active samp {
  border-color: #006cff;
  background: #006cff;
}

.vd-1content .item.active samp:before {
  opacity: 0;
}

.vd-1content .item.active samp:after {
  opacity: 1;
}

.vd-1content .item.active samp img {
  opacity: 0;
}

.vd-1content .item.active samp img:last-child {
  opacity: 1;
}

.vd-1content .item.active h4 {
  color: #1c71d7;
}

.vd-1content .item.active em:before {
  opacity: 1;
}

.vd-1content .item.active em:after {
  opacity: 0;
}

.vd-1content .item.active p i {
  background: #006cff;
}

.vd-1content .item.active p:before {
  border-color: #066fff;
}

.vd-1content .item.active p:after {
  border-color: #7eb5ff;
}

.vd-2 {
  width: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../images/bg-6.jpg");
  padding: 90px 0px 124px;
  border-bottom: 1px #2a50ce solid;
}

.vd-2 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 24px;
  z-index: 12;
}

.vd-2 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #108cee;
  transform: translateX(-50%);
}

.vd-2content {
  width: 1440px;
  overflow: hidden;
  margin: 40px auto 0px;
  position: relative;
}

.vd-2left {
  float: left;
  width: 48.96%;
  overflow: hidden;
  position: relative;
  background: #000;
}

.vd-2left:before {
  width: 100%;
  height: 100px;
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
  background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
  background: -ms-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
  background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
  z-index: 1;
}

.vd-2content samp {
  float: left;
  width: 100%;
  overflow: hidden;
  opacity: 0.8;
}

.vd-2content samp img {
  width: 100%;
  height: auto;
}

.vd-2left:hover samp img {
  transform: scale(1.04);
}

.vd-2content span {
  width: auto;
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 12;
  font-size: 24px;
  color: #fff;
  font-family: "sybold";
}

.vd-2content em {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 12;
  background: url("../images/icon-18.png") no-repeat;
  background-size: 100%;
  opacity: 0.7;
  cursor: pointer;
}

.vd-2content em:hover {
  opacity: 1;
}

.vd-2top {
  float: right;
  width: 50%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.vd-2item {
  width: 49%;
  overflow: hidden;
  position: relative;
  background: #000;
}

.vd-2item:hover samp img {
  transform: scale(1.04);
}

.vd-2item:before {
  width: 100%;
  height: 100px;
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.2));
  background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.2));
  background: -ms-linear-gradient(top, transparent, rgba(0, 0, 0, 0.2));
  background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.2));
  z-index: 1;
}

.vd-2bottom {
  width: 50%;
  overflow: hidden;
  position: relative;
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.vd-2bottom:hover samp img {
  transform: scale(1.04);
}

.vd-2bottom:before {
  width: 100%;
  height: 100px;
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.3));
  background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.3));
  background: -ms-linear-gradient(top, transparent, rgba(0, 0, 0, 0.3));
  background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.3));
  z-index: 1;
}

/*case-1*/

.case-1 {
  width: 100%;
  overflow: hidden;
  padding-top: 110px;
}

.case-1 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 24px;
  z-index: 12;
}

.case-1 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #108cee;
  transform: translateX(-50%);
}

/*case-2*/

.case-2 {
  width: 100%;
  overflow: hidden;
  padding: 170px 0px 100px;
  border-bottom: 1px #2a50ce solid;
}

.case-2 .h3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  font-size: 46px;
  color: #333;
  font-family: "syreg";
  padding-bottom: 24px;
  z-index: 12;
}

.case-2 .h3:before {
  width: 50px;
  height: 6px;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #108cee;
  transform: translateX(-50%);
}

.case-2content {
  width: 100%;
  margin-top: 40px;
}

.case-2pannel {
  width: 1920px;
  padding: 20px 0px;
}

.case-2item {
  float: left;
  width: 210px;
  height: 90px;
  position: relative;
  margin-right: 20px;
  background: -webkit-linear-gradient(top, #f2f3f8, #fcfcfe);
  background: -moz-linear-gradient(top, #f2f3f8, #fcfcfe);
  background: -ms-linear-gradient(top, #f2f3f8, #fcfcfe);
  background: -o-linear-gradient(top, #f2f3f8, #fcfcfe);
  box-sizing: border-box;
  box-shadow: 0px 0px 12px 4px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  position: relative;
}

.case-2pannel:nth-child(2n) {
  margin-left: -100px;
}

.case-2item samp {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}

.case-2item samp img {
  width: auto;
  height: auto;
  max-width: 60%;
  max-height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.case-2item.sel {
  border: 1px #065fd0 solid;
  z-index: 12;
}

.case-2info {
  width: 270px;
  height: 130px;
  background: #065fd0;
  position: absolute;
  box-shadow: 0px 0px 2px 1px #8ca5c6;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.case-2info p {
  width: 84%;
  overflow: hidden;
  line-height: 26px;
  color: #fff;
  font-size: 16px;
  margin: 0px auto;
}

.case-2item:hover .case-2info {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/*tanchuang*/

.case-prop {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
}

.case-content {
  width: 75%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 80%;
  background: #fff;
  overflow: hidden;
}

.case-close {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 40px;
  top: 40px;
  background: url("../images/icon-99.png") no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.case-close:hover {
  transform: rotate(180deg);
}

.case-detail {
  width: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 80px 80px 5.2vw;
  height: 100%;
}

.case-pannel {
  width: 100%;
  overflow: hidden;
  display: none;
}

.case-pannel.active {
  display: block;
}

.case-pannel .h3 {
  width: 100%;
  overflow: hidden;
  text-align: center;
  font-size: 36px;
  color: #333;
  font-family: "symed";
}

.case-info {
  width: 100%;
  overflow: hidden;
  line-height: 28px;
  font-size: 16px;
  color: #333;
  font-family: "syreg";
  margin-top: 15px;
}

.case-title {
  width: 100%;
  overflow: hidden;
  text-align: center;
  margin-top: 40px;
  font-size: 24px;
  color: #333;
  font-family: "symed";
}

.case-ul {
  width: 100%;
  overflow: hidden;
  line-height: 54px;
  background: #eef1f5;
  border-radius: 27px;
  margin-top: 20px;
}

.case-ul span {
  float: left;
  width: auto;
  overflow: hidden;
  margin-left: 105px;
  padding-left: 10px;
  font-size: 18px;
  color: #083e6b;
  font-family: "symed";
  position: relative;
}

.case-ul span:before {
  width: 4px;
  height: 4px;
  content: "";
  position: absolute;
  left: 0px;
  top: 25px;
  border-radius: 50%;
  background: #083e6b;
}

.case-pic {
  width: 100%;
  overflow: hidden;
  margin-top: 15px;
}

.case-pic img {
  float: left;
  width: 100%;
  height: auto;
}

.case-ul.ul2 span {
  margin-left: 60px;
}

.case-ul.ul3 span {
  margin-left: 24px;
}

.case-prop-active {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 1799px) {
  /*header*/

  .head {
    height: 70px;
  }

  .head-right ul {
    line-height: 70px;
  }

  .head-right ul li {
    margin-left: 40px;
  }

  .head-more {
    margin-top: 19px;
    margin-left: 50px;
  }

  .sub-content {
    width: 710px;
    margin-top: 40px;
    padding: 10px 0px;
  }

  .sub-item {
    width: 93%;
  }

  .sub-left {
    width: 200px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
  }

  .sub-left samp {
    width: 36px;
  }

  .sub-right {
    width: 460px;
    height: 40px;
    line-height: 40px;
  }

  .sub-right a {
    width: 113px;
    font-size: 14px;
  }

  .sub-right a.icon:before {
    right: 15px;
  }

  /*banner*/

  .banner-ver {
    width: 1230px;
    margin-top: 30px;
  }

  .banner-ver .h3 {
    font-size: 32px;
  }

  .banner-ver p {
    font-size: 18px;
  }

  .banner-ver ul {
    margin-top: 30px;
  }

  .banner-ver ul li {
    width: 130px;
  }

  .banner-ver ul li span {
    font-size: 14px;
  }

  .banner-ver ul li span samp {
    font-size: 40px;
  }

  .banner-ver ul li em {
    font-size: 14px;
  }

  /*zhengti-fangan*/

  .zs-1 {
    padding: 60px 0px 110px;
  }

  .zs-2 {
    width: 1230px;
  }

  .zs-2 .h3 {
    font-size: 32px;
    padding-bottom: 20px;
  }

  .zs-2 .h3:before {
    width: 48px;
    height: 5px;
  }

  .zs-2 form {
    margin-top: 50px;
    height: 50px;
    line-height: 50px;
  }

  .zs-2 .txt {
    width: calc(100% - 50px);
    font-size: 16px;
  }

  .zs-2 .bt {
    width: 50px;
  }

  .sz-3 {
    margin: 45px auto 0px;
    padding-bottom: 12px;
  }

  .sz-3 .h4 {
    width: 1230px;
    font-size: 20px;
    line-height: 30px;
    padding-bottom: 24px;
  }

  .sz-3 .h4 img {
    margin-right: 12px;
    width: auto;
    height: 24px;
    margin-top: 2px;
  }

  .sz-3content {
    width: 1230px;
  }

  .sz-3content span {
    line-height: 36px;
    font-size: 14px;
  }

  .sz-3content span a {
    font-size: 14px;
  }

  .sz-3 ul {
    width: 1230px;
  }

  .sz-3 ul li {
    line-height: 36px;
  }

  .sz-3 ul li em {
    font-size: 16px;
  }

  .sz-3 ul li p span a {
    font-size: 14px;
  }

  .sz-4content {
    width: 1230px;
    line-height: 36px;
  }

  .sz-4left em {
    font-size: 16px;
  }

  .sz-4center p span a {
    font-size: 14px;
  }

  .sz-4item em {
    font-size: 16px;
  }

  .sz-4item span a {
    font-size: 14px;
  }

  /*hot-fangan*/

  .zs-5 {
    padding: 70px 0px 60px;
  }

  .zs-5 .h3 {
    font-size: 32px;
  }

  .zs-5head {
    width: 450px;
    height: 40px;
    line-height: 40px;
    margin: 20px auto 0px;
  }

  .zs-5head span {
    font-size: 18px;
  }

  .zs-5content {
    width: 1230px;
    margin: 32px auto 0px;
  }

  .zs-5item {
    height: 160px;
    padding: 20px;
  }

  .zs-5cont span {
    font-size: 14px;
  }

  .zs-5cont span em {
    font-size: 20px;
    margin-right: 8px;
  }

  .zs-5info {
    line-height: 23px;
    font-size: 14px;
  }

  .zs-5cont p {
    font-size: 14px;
    margin-top: 18px;
  }

  .zs-6 {
    padding: 60px 0px 50px;
  }

  .zs-6 .h3 {
    font-size: 32px;
    padding-bottom: 20px;
  }

  .zs-6 .h3:before {
    width: 48px;
    height: 5px;
  }

  .zs-6content {
    width: 1230px;
    margin: 32px auto 0px;
  }

  .zs-6pic span {
    width: 48px;
    height: 48px;
  }

  .zs-6bottom {
    margin-top: 18px;
    height: 28px;
    line-height: 28px;
    font-size: 20px;
  }

  .zs-6bottom span {
    font-size: 13px;
    margin-right: 10px;
  }

  .zs-6content .swiper-button-prev {
    width: 18px;
    left: -30px;
  }

  .zs-6content .swiper-button-next {
    width: 18px;
    right: -30px;
  }

  .zs-6pag {
    margin-top: 40px;
  }

  .zs-7 {
    padding: 60px 0px;
  }

  .zs-7head {
    padding-bottom: 20px;
  }

  .zs-7head .h3 {
    font-size: 32px;
  }

  .zs-7info {
    font-size: 18px;
  }

  .zs-7head:before {
    width: 48px;
    height: 5px;
  }

  .zs-7content {
    width: 1230px;
    margin: 30px auto 0px;
  }

  .zs-7item {
    margin-top: 42px;
  }

  .zs-7cont span {
    font-size: 22px;
  }

  .zs-7des {
    line-height: 23px;
    font-size: 14px;
  }

  .zs-7cont em {
    font-size: 14px;
    margin-top: 12px;
  }

  .zs-7pag {
    margin-top: 40px;
  }

  .zs-7content .swiper-button-prev {
    width: 18px;
    left: -30px;
  }

  .zs-7content .swiper-button-next {
    width: 18px;
    right: -30px;
  }

  /*gaishu-banner*/

  .banner-ny {
    height: 400px; /*margin-top: 70px;*/
  }

  .banner-center {
    width: 1230px;
  }

  .banner-center .h3 {
    font-size: 40px;
  }

  .banner-center p {
    font-size: 18px;
  }

  .banner-link {
    margin-top: 50px;
  }

  /*gaishu-nav*/

  .nav-genner {
    width: 1230px;
    margin: -40px auto 0px;
    height: 80px;
    line-height: 80px;
  }

  /*gaishu-xianzhuang*/

  .gs-1 {
    padding: 90px 0px 100px;
  }

  .gs-1 .h3 {
    font-size: 40px;
    padding-bottom: 24px;
  }

  .gs-1content {
    width: 1230px;
    margin: 30px auto 0px;
  }

  .gs-1item {
    padding: 50px;
  }

  .gs-1item samp {
    height: 60px;
  }

  .gs-1item span {
    font-size: 20px;
  }

  .gs-1item p {
    line-height: 24px;
    font-size: 14px;
  }

  /*gaishu-gongneng*/

  .gs-2 {
    padding: 60px 0px 50px;
  }

  .gs-2 .h3 {
    font-size: 40px;
  }

  .gs-2head {
    width: 1230px;
    height: 130px;
  }

  .gs-2head ul li samp {
    height: 50px;
  }

  .gs-2head ul li span {
    font-size: 20px;
  }

  .gs-2content {
    width: 1230px;
    margin: 50px auto 0px;
  }

  .gs-2left span {
    font-size: 30px;
  }

  .gs-2info {
    line-height: 25px;
    font-size: 15px;
    margin-top: 14px;
  }

  .gs-2left ul {
    margin-top: 12px;
  }

  .gs-2left ul li {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }

  /*gaishu-guanli*/

  .gs-3 {
    padding: 100px 0px 90px;
  }

  .gs-3 .h3 {
    font-size: 40px;
    padding-bottom: 24px;
  }

  .gs-3content {
    width: 1230px;
  }

  .gs-3item {
    height: 500px;
  }

  .gs-3item .h4 {
    font-size: 20px;
  }

  .gs-3item p {
    line-height: 25px;
    font-size: 14px;
  }

  .gs-3item ul li {
    font-size: 14px;
  }

  .gs-3item span a {
    font-size: 14px;
  }

  .gs-3item em {
    font-size: 160px;
  }

  /*gs-changjing*/

  .gs-4 {
    padding: 100px 0px 120px;
  }

  .gs-4 .h3 {
    font-size: 40px;
    padding-bottom: 24px;
  }

  .gs-4content {
    width: 1230px;
    margin: 40px auto 0px;
  }

  .gs-4item {
    height: 350px;
  }

  .gs-4item .h4 {
    margin: 32px auto 0px;
    font-size: 24px;
  }

  .gs-4item p {
    font-size: 15px;
  }

  .gs-4item ul li {
    font-size: 15px;
  }

  /*gs-lilngyu*/

  .gs-5 {
    background-size: 1799px;
  }

  .gs-5head .h3 {
    font-size: 40px;
    margin-top: 50px;
  }

  .gs-5content {
    width: 1230px;
    margin: 280px auto 0px;
  }

  /*gs-case*/

  .gs-6 {
    padding: 110px 0px 90px;
  }

  .gs-6 .h3 {
    font-size: 40px;
  }

  .gs-6content {
    width: 1230px;
  }

  .gs-6bottom {
    padding-bottom: 32px;
  }

  .gs-6title samp {
    width: 40px;
    height: 40px;
  }

  .gs-6title span {
    width: calc(100% - 50px);
    height: 40px;
    line-height: 40px;
    font-size: 20px;
  }

  .gs-6info {
    font-size: 15px;
  }

  .gs-6cont {
    margin: 15px auto 0px;
  }

  /*gs-xiazai*/

  .gs-7 {
    padding: 60px 0px 80px;
  }

  .gs-7 .h3 {
    font-size: 40px;
  }

  .gs-7content {
    width: 1230px;
    margin: 36px auto 0px;
  }

  .gs-7center span {
    font-size: 30px;
  }

  .gs-7center em {
    margin-top: 24px;
    font-size: 16px;
  }

  /*cj-1*/

  .cj-1 {
    margin-top: -40px;
    padding: 140px 0px 50px;
  }

  .cj-1 .h3 {
    font-size: 40px;
  }

  .cj-1head {
    width: 1230px;
    margin: 45px auto 0px;
    height: 136px;
  }

  .cj-1head ul li samp {
    height: 50px;
  }

  .cj-1head ul li span {
    font-size: 20px;
  }

  .cj-1content {
    width: 1230px;
    margin: 50px auto 0px;
  }

  /*cj-2*/

  .cj-2 {
    padding: 70px 0px 80px;
  }

  .cj-2 .h3 {
    font-size: 40px;
  }

  .cj-2content {
    width: 1230px;
    margin: 30px auto 0px;
  }

  .cj-2center span {
    font-size: 30px;
  }

  .cj-2center p {
    font-size: 15px;
    line-height: 25px;
  }

  /*gongnengyingyong-1*/

  .yy-1 {
    padding: 100px 0px 70px;
  }

  .yy-1 .h3 {
    font-size: 40px;
  }

  .yy-1pic {
    width: 1230px;
    margin: 40px auto 0px;
  }

  /*gongnengyingyong-3*/

  .yy-3 {
    padding: 100px 0px 110px;
  }

  .yy-3 .h3 {
    font-size: 40px;
  }

  .yy-3content {
    width: 1230px;
  }

  .yy-3item {
    margin-top: 30px;
    padding: 0px 25px;
  }

  .yy-3item samp {
    width: 100px;
  }

  .yy-3center {
    width: 280px;
  }

  .yy-3center span {
    font-size: 22px;
  }

  .yy-3center p {
    font-size: 15px;
  }

  .yy-3item a {
    width: 100px;
    font-size: 15px;
  }

  /*video-2*/

  .vd-1 {
    padding: 70px 0px;
  }

  .vd-1 .h3 {
    top: 70px;
    font-size: 32px;
  }

  .vd-1cir {
    width: 700px;
    height: 700px;
  }

  .vd-1item1 {
    width: 360px;
    left: -178px;
    top: 137px;
  }

  .vd-1item1 samp,
  .vd-1item2 samp,
  .vd-1item3 samp,
  .vd-1item4 samp,
  .vd-1item5 samp,
  .vd-1item6 samp,
  .vd-1item7 samp,
  .vd-1item8 samp {
    width: 55px;
    height: 55px;
  }

  .vd-1item1 h4,
  .vd-1item2 h4,
  .vd-1item3 h4,
  .vd-1item4 h4 {
    line-height: 55px;
    font-size: 20px;
    margin-left: 16px;
  }

  .vd-1item5 h4,
  .vd-1item6 h4,
  .vd-1item7 h4,
  .vd-1item8 h4 {
    line-height: 55px;
    font-size: 20px;
    margin-right: 16px;
  }

  .vd-1item1 em {
    width: 170px;
    height: 57px;
    margin: 26px 0px 0px 15px;
  }

  .vd-1item1 em:before {
    background-size: 100%;
  }

  .vd-1item1 em:after {
    background-size: 100%;
  }

  .vd-1item1 p {
    right: 15px;
    bottom: 10px;
  }

  .vd-1item2 {
    width: 360px;
    left: -222px;
    top: 261px;
  }

  .vd-1item2 em {
    width: 170px;
    margin: 20px 0px 0px 15px;
  }

  .vd-1item2 em:before {
    background-size: 100%;
  }

  .vd-1item2 em:after {
    background-size: 100%;
  }

  .vd-1item2 p {
    right: 12px;
    bottom: 19px;
  }

  .vd-1item3 {
    width: 360px;
    left: -222px;
    top: 377px;
  }

  .vd-1item3 em {
    width: 170px;
    margin: 20px 0px 0px 15px;
  }

  .vd-1item3 em:before {
    background-size: 100%;
  }

  .vd-1item3 em:after {
    background-size: 100%;
  }

  .vd-1item3 p {
    right: 12px;
    bottom: 18px;
  }

  .vd-1item4 {
    width: 360px;
    left: -178px;
    top: 505px;
  }

  .vd-1item4 em {
    width: 170px;
    margin: -27px 0px 0px 15px;
    z-index: 12;
  }

  .vd-1item4 em:before {
    background-size: 100%;
  }

  .vd-1item4 em:after {
    background-size: 100%;
  }

  .vd-1item4 p {
    right: 16px;
    bottom: 61px;
  }

  .vd-1item5 {
    width: 360px;
    right: -178px;
    top: 137px;
  }

  .vd-1item5 em {
    width: 170px;
    height: 57px;
    margin: 26px 15px 0px 0px;
  }

  .vd-1item5 em:before {
    background-size: 100%;
  }

  .vd-1item5 em:after {
    background-size: 100%;
  }

  .vd-1item5 p {
    left: 15px;
    bottom: 10px;
  }

  .vd-1item6 {
    width: 360px;
    right: -222px;
    top: 261px;
  }

  .vd-1item6 em {
    width: 170px;
    margin: 20px 15px 0px 0px;
  }

  .vd-1item6 em:before {
    background-size: 100%;
  }

  .vd-1item6 em:after {
    background-size: 100%;
  }

  .vd-1item6 p {
    left: 12px;
    bottom: 19px;
  }

  .vd-1item7 {
    width: 360px;
    right: -222px;
    top: 377px;
  }

  .vd-1item7 em {
    width: 170px;
    margin: 20px 15px 0px 0px;
  }

  .vd-1item7 em:before {
    background-size: 100%;
  }

  .vd-1item7 em:after {
    background-size: 100%;
  }

  .vd-1item7 p {
    left: 12px;
    bottom: 18px;
  }

  .vd-1item8 {
    width: 360px;
    right: -178px;
    top: 505px;
  }

  .vd-1item8 em {
    width: 170px;
    margin: -27px 15px 0px 0px;
  }

  .vd-1item8 em:before {
    background-size: 100%;
  }

  .vd-1item8 em:after {
    background-size: 100%;
  }

  .vd-1item8 p {
    left: 16px;
    bottom: 61px;
  }

  .vd-2 {
    padding: 70px 0px 80px;
  }

  .vd-2 .h3 {
    font-size: 40px;
  }

  .vd-2content {
    width: 1230px;
    margin: 30px auto 0px;
  }

  .vd-2content span {
    font-size: 20px;
  }

  .vd-2content em {
    width: 50px;
    height: 50px;
  }

  /*case-1*/

  .case-1 {
    padding-top: 90px;
  }

  .case-1 .h3 {
    font-size: 40px;
  }

  /*case-2*/

  .case-2 {
    padding: 140px 0px 90px;
  }

  .case-2 .h3 {
    font-size: 40px;
  }
}