@charset "utf-8";
/* CSS Document */
/*reset*/
body,div,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,iframe,input,textarea,select,label,article,aside,footer,header,menu,nav,section,time,audio,video{ margin:0; padding:0;}
article,aside,footer,header,hgroup,nav,section,audio,canvas,video{display:block;}
body{ font-size:16px; font-family:"微软雅黑",Arial,Helvetica,STHeiti,Droid Sans Fallback; color:#374A61; letter-spacing:1px;}
textarea{resize:none;}
iframe,img{border:0;}
ul,ol{list-style:none;}
input,select,textarea{outline:0;-webkit-user-modify:read-write-plaintext-only;}
input{-webkit-appearance:none;}
h1,h2,h3 { font-weight:100;}
a{text-decoration:none;}
.cl { clear:both;}
em { font-style:normal;}
/*basic*/
.fl{ float:left;}
.fr{ float:right;}
.zt{ font-family:Microsoft YaHei;}
.btn-primary{ display: inline-block;background: linear-gradient( 90deg, #10CA71 0%, #08E19F 100%);color: #fff;}
.btn-primary:hover{background: linear-gradient( 90deg, #1AB76C 0%, #13DC9F 100%);}
.btn-primary.svg-icon{font-size: 30px; margin-right: 14px;}
.btn-primary.border{border: 2px solid #20B677;box-shadow: 0px 10px 20px 0px rgba(37,191,117,0.43);font-size: 30px;border-radius: 16px;}
.svg-icon{width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}
.mt60{margin-top: 60px;}
/*top*/
.wrap{ position:relative; background: url('../images/bg_section1.png') no-repeat top;background-size: 100% auto;}
.top { width:100%;position: fixed;top: 0;z-index: 99999;}
.top.white{background: white;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);}
.logo { flex: 478px 0 0;}
.logo img{ width: 48px;height: 48px;}
.logo a{ display: flex; align-items: center; color: #374A61;}
.head {display: flex; align-items: center; justify-content: space-between; max-width:1200px; height: 80px; margin:0px auto;}
.top .top-link{
  position: absolute;
  left: 20px;
  top: 34px;
  font-weight: 700; 
  font-size: 16px;
  color: rgba(51, 75, 102, 0.5);
  transition: all 0.3s ease-in-out;
}
.top .top-link:hover{
  color: RGB(54, 75, 100);
}
.h-title{margin-left: 16px;font-weight: bold; font-size: 24px;}
.sub-title{margin-left: 10px;font-size: 24px;color: #374A61;}
.sub-title::before{content: '';display: inline-block;width: 6px;height: 6px;background-color: #374A61;border-radius: 50%;vertical-align: 0.15em;margin-right: 10px;}
.h-split{padding: 0 10px;}
.btn_top {margin-left: 25px; padding: 8px 30px; border-radius:8px; font-size:16px;font-weight: bold;}
.title_a { font-weight: bold; font-size: 50px; color: #2D3A48;text-align: center;}
.title_b { margin-top: 6px; font-weight: 400; font-size: 30px;text-align: center;}
.section-1 {padding-top: 150px;}
.main-list{display: flex;justify-content: center;margin-top: 40px;}
.main-item{flex: 0 0 192px;transition: transform 0.3s ease; text-align: center;cursor: pointer;}
.main-item:hover {transform: translateY(-10px);}
.main-item+.main-item{margin-left: 60px;}
.main-item img{width: 130px;height: 130px;margin-bottom: 17px; border-radius: 50%;box-shadow: 0px 0px 20px 0px rgba(73,135,255,0.1);}
.banner {margin-top: 40px; position: relative;display: flex;align-items: center;justify-content: center;}
.banner .left-img{width: 700px;height: 457px;}
.main-right{margin-left: 38px;}
.main-right .btn-primary{position: relative; padding: 16px 50px;}
.btn-tips{position: absolute; top: -14px; right: -10px; transform: skewX(-15deg);padding: 4px 12px; background: linear-gradient( 270deg, #31A9FF 0%, #018BEF 100%); box-shadow: 0px 4px 10px 0px rgba(0,173,120,0.2);border-radius: 8px;word-break:keep-all; font-size: 16px;}
.qr-box{
  margin: 20px auto 0;
  width: 160px;
  padding: 30px;
  background: rgba(255,255,255,0.5);
  border-radius: 16px;
  border: 1px solid #FFFFFF;
}
.qr-box img{
  width: 160px;
  height: 160px;
}
.qr-tips{
  width: 102px;
  padding: 10px 30px;
  margin: 16px auto 0;
  background: linear-gradient( 90deg, #FF4A80 0%, #FF87AB 100%);
  border-radius: 41px;
  color: #fff;
}
.group-content {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.swiper-container{
  position: relative;
  width: 740px;
  height: 470px;
  overflow: hidden;
  z-index: 1;
}
.group-left{
  margin-right: 40px;
}
.classify-content{
  margin-bottom: 10px;
  padding-left: 30px;
  display: flex;
  align-items: center;
  width: 320px;
  height: 100px;
  /* background: #fff; */
  border-radius: 16px;
  cursor: pointer;
}
.classify-img{
  width: 44px;
  height: 44px;
  margin-right: 20px;
}
.classify-title{
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 20px;
}
.content-bg{
  background: linear-gradient( 270deg, #FFFFFF 0%, #DEF1FF 100%);
}
.organize-img{height: 470px;width: 740px;}
.section {margin-top: 70px;}
.section-title{font-weight: bold; font-size: 60px; text-align: center; font-style: italic;}
.section-down{margin-top: 30px;text-align: center;}
.section-down .btn-primary{padding: 20px 60px;}
.wp-tab{
  margin-top: 13px;
  text-align: center;
}
.wp-tab-label {
  position: relative;
  cursor: pointer;
  font-weight: bold;
  font-size: 20px;
}
.wp-tab-label.active{
  color: #17BE85;
}
.wp-tab-label.active::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: #17BE85;
}
.wp-tab-label.active::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid #17BE85; 
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 6px solid transparent;
}

.wp-tab-split {
  margin: 0 30px;
  font-size: 20px;
}
.swiper-certif-list{
  width: 100%;
  height: 550px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.swiper-certif-list li{
  width: 50%;
  position: absolute;
  transition: all .5s ease-out;
  border-radius: 5px;
  text-align: center;
  cursor: pointer; 
}
 .YcenterPosition {
  position: absolute;
  top: 50%
}
 .swiper-certif-list li img {
  width: 900px;
  margin: 0 auto;
  box-shadow: 0 10px 20px -10px rgba(51, 51, 51, .32941);
  display: block
}
 .p0,.p1 {
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(.7);
    transform-origin: 50% 50%;
    z-index: 0
}

 .p2 {
    opacity: .3;
    transform: translate3d(0, -50%, 0) scale(.6);
    transform-origin: 50% 50%;
    z-index: 1
}

 .p3 {
    transform: translate3d(15%, -50%, 0) scale(.8);
    transform-origin: 80% 50%;
    opacity: .6;
    z-index: 2
}

 .p4 {
    transform: translate3d(50%, -50%, 0) scale(1);
    transform-origin: 0 50%;
    z-index: 3;
    opacity: 1
}

 .p5 {
    transform: translate3d(85%, -50%, 0) scale(.8);
    transform-origin: 20% 50%;
    opacity: .7;
    z-index: 2
}

 .p6 {
    opacity: .3;
    transform: translate3d(100%, -50%, 0) scale(.6);
    transform-origin: 50% 50%;
    z-index: 1
}
 .p7,
 .p8,
 .p9 {
    opacity: 0;
    transform: translate3d(100%, -50%, 0) scale(.6);
    transform-origin: 50% 50%;
    z-index: 0
}
@media screen and (max-width:1683px) {
   .p2 {
      transform: translate3d(-8%, -50%, 0) scale(.6)
  }

   .p3 {
      transform: translate3d(12%, -50%, 0) scale(.8)
  }

   .p4 {
      transform: translate3d(47%, -50%, 0) scale(1)
  }

   .p5 {
      transform: translate3d(82%, -50%, 0) scale(.8)
  }

   .p6 {
      transform: translate3d(102%, -50%, 0) scale(.6)
  }
}

@media screen and (max-width:1583px) {
   .p2 {
      transform: translate3d(-8%, -50%, 0) scale(.6)
  }

   .p3 {
      transform: translate3d(12%, -50%, 0) scale(.8)
  }

   .p4 {
      transform: translate3d(44%, -50%, 0) scale(1)
  }

   .p5 {
      transform: translate3d(79%, -50%, 0) scale(.8)
  }

   .p6 {
      transform: translate3d(100%, -50%, 0) scale(.6)
  }
}

@media screen and (max-width:1483px) {
   .p2 {
      transform: translate3d(-12%, -50%, 0) scale(.6)
  }

   .p3 {
      transform: translate3d(7%, -50%, 0) scale(.8)
  }

   .p4 {
      transform: translate3d(39%, -50%, 0) scale(1)
  }

   .p5 {
      transform: translate3d(74%, -50%, 0) scale(.8)
  }

   .p6 {
      transform: translate3d(97%, -50%, 0) scale(.6)
  }
}

@media screen and (max-width:1383px) {
   .p2 {
      transform: translate3d(-7%, -50%, 0) scale(.6)
  }

   .p3 {
      transform: translate3d(8%, -50%, 0) scale(.8)
  }

   .p4 {
      transform: translate3d(35%, -50%, 0) scale(1)
  }

   .p5 {
      transform: translate3d(67%, -50%, 0) scale(.8)
  }

   .p6 {
      transform: translate3d(88%, -50%, 0) scale(.6)
  }
}

@media screen and (max-width:1283px) {
   .p2 {
      transform: translate3d(-12%, -50%, 0) scale(.6)
  }

   .p3 {
      transform: translate3d(2%, -50%, 0) scale(.8)
  }

   .p4 {
      transform: translate3d(28%, -50%, 0) scale(1)
  }

   .p5 {
      transform: translate3d(63%, -50%, 0) scale(.8)
  }

   .p6 {
      transform: translate3d(85%, -50%, 0) scale(.6)
  }
}
.more-list{
  display: flex;
  column-gap: 60px;
  justify-content: center;
  margin-top: 40px;
}
.more-item{
  flex: 0 0 192px;
  text-align: center;
}
.more-img{
  width: 130px;
  height: 130px;
}
.more-text{
  margin-top: 17px;
  font-size: 20px;
}
.star-box{width: 1200px; margin: 14px auto 16px;text-align: right;}
.star-box .svg-icon{font-size: 20px;}
.star-box .svg-icon+.svg-icon{margin-left: 10px;}
.star-box span{font-weight: bold; font-size: 14px; color: #393D59;}
.star-num{margin-left: 4px; font-weight: bold; font-size: 20px; color: #FF981E; font-style: normal; }
.user-list{width: 1120px; margin: 0 auto; padding: 0 40px; background: #F0FAFF; border-radius: 16px; }
.user-item {display: flex; align-items: center;height: 116px; border-bottom: 1px solid rgba(0,0,0,0.1); line-height: 26px;}
.user-item img{width: 46px;height: 46px;border-radius: 50%;}
.user-item .user-name{flex: 0 0 82px; margin-left: 12px; font-weight: bold; font-size: 14px; color: #393D59;}
.footer { text-align:center; padding:20px 0px;}
.footer p { width:800px; margin:5px auto; line-height:24px; font-size:14px; color:#666;opacity: 0.5;}
.tj { display:none;}
.main-area{width: 1200px;margin: 0 auto;}