.cls-50 {
    stroke-dasharray: 50;
    animation: cls-50-k 3s linear infinite;
}

.cls-50b {
    stroke-dasharray: 50;
    stroke-dashoffset: -50;
    animation: cls-50b-k 3s 1s linear infinite;
}

@keyframes cls-50-k {
    from {
        stroke-dashoffset: -100;
    }
    to {
        stroke-dashoffset: 100;
    }
}

@keyframes cls-50b-k {
    from {
        stroke-dashoffset: -50;
    }
    to {
        stroke-dashoffset: 150;
    }
}

.cls-100 {
    stroke-dasharray: 100;
    animation: cls-100-k 1.5s linear infinite;
}

.cls-100b {
    stroke-dasharray: 100;
    animation: cls-100-k 1.2s .5s linear infinite;
}

@keyframes cls-100-k {
    from {
        stroke-dashoffset: -100;
    }
    to {
        stroke-dashoffset: 100;
    }
}

.cls-200 {
    stroke-dasharray: 100;
    stroke-dashoffset: -100;
    animation: cls-200-k 1.5s .3s linear infinite;
}

.cls-200b {
    stroke-dasharray: 100;
    animation: cls-200b-k 1.45s linear infinite;
}

@keyframes cls-200-k {
    from {
        stroke-dashoffset: -100;
    }
    to {
        stroke-dashoffset: 100;
    }
}

@keyframes cls-200b-k {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: -300;
    }
}

.cls-400 {
    stroke-dasharray: 400;
    stroke-dashoffset: -400;
    animation: cls-400-k 4.5s 2s linear infinite;
}

.cls-400b {
    stroke-dasharray: 600;
    animation: cls-400b-k 4.6s linear infinite;
}

.cls-400c {
    stroke-dasharray: 400;
    stroke-dashoffset: -400;
    animation: cls-400-k 4.2s 2.5s linear infinite;
}

@keyframes cls-400-k {
    from {
        stroke-dashoffset: -400;
    }
    to {
        stroke-dashoffset: 400;
    }
}
@keyframes cls-400b-k {
    from {
        stroke-dashoffset: -200;
    }
    to {
        stroke-dashoffset: 1000;
    }
}

.cls-800 {
    stroke-dasharray: 1200;
    animation: cls-800-k 6s linear infinite;
}

.cls-800b {
    stroke-dasharray: 1200;
    animation: cls-800b-k 6.5s linear infinite;
}

@keyframes cls-800-k {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 2400;
    }
}

@keyframes cls-800b-k {
    0% {
        stroke-dashoffset: 600;
    }
    100% {
        stroke-dashoffset: 3000;
    }
}

.cls-3200 {
    stroke-dasharray: 2400;
    animation: cls-3200-k 8s linear infinite;
}


@keyframes cls-3200-k {
    0% {
        stroke-dashoffset: -2400;
    }
    100% {
        stroke-dashoffset: 2400;
    }
}

.cls-3200b {
    stroke-dasharray: 1600;
    animation: cls-3200b-k 6s linear infinite;
}


@keyframes cls-3200b-k {
    0% {
        stroke-dashoffset: 600;
    }
    100% {
        stroke-dashoffset: 3800;
    }
}
p {
  margin: 0;
}
.cont1 {
  width: 100%;
  height: auto;
  padding: 0.32rem 0.756rem;
  box-sizing: border-box;
  background: url(
  https://ecomoss.ks3-cn-beijing.ksyuncs.com/assets/resources/cont1_bg.png) no-repeat;
  background-size: 100% 100%;
}
.cont1_top {
  width: 2.8rem;
  margin: auto;
}
#c_in{
    fill: #7c91d8;
}
.cont1_top .title {
  width: 100%;
  font-size: 0.192rem;
  /*font-family: NotoSansHans;*/
  font-weight: 500;
  color: #333333;
  text-align: center;
  line-height: 0.24rem;
}
.cont1_top .cont1_tab {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cont1_top .cont1_tab .cont1_tab_tit {
  min-width: 0.6rem;
  box-sizing: border-box;
  padding: 0 0.08rem;
  height: 0.2rem;
  line-height: 0.2rem;
  background: #ffffff;
  font-weight: 400;
  border-radius: 0.032rem;
  /* font-family: SourceHanSansCN; */
  text-align: center;
  color: #0064d2;
  margin: 0.06rem;
  font-size: 0.056rem;
  cursor: pointer;
  transition: 0.5s;
}
.cont1_top .cont1_tab .cont1_tab_tit:hover {
  background: #0064d2;
  color: #fff;
}
.cont1_top .cont1_tab .cur {
  background: #0064d2;
  color: #fff;
}
.cont1_item {
  width: 100%;
  height: auto;
  display: none;
}
.cont1_item .cont1_item_img {
  width: 100%;
  height: auto;
}
.cont1_item .cont1_item_img img {
  width: 100%;
  height: auto;
}
.cont1_item .cont1_item_detail {
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cont1_item .cont1_item_info {
  margin: 0 0.08rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.cont1_item .cont1_item_info img {
  width: 0.2rem;
  height: auto;
}
.cont1_item .cont1_item_info .num {
  width: auto;
  height: auto;
  font-size: 0.144rem;
  font-family: Myriad Pro;
  font-weight: 400;
  color: #0064d2;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cont1_item .cont1_item_info .num span {
  width: auto;
  height: auto;
  font-size: 0.264rem;
  font-family: Myriad Pro;
  font-weight: 400;
  color: #0064d2;
  margin: 0;
}
.cont1_item .cont1_item_info .tit {
  width: auto;
  height: auto;
  font-size: 0.064rem;
 /* font-family: SourceHanSansCN; */
  font-weight: 400;
  color: #0064d2;
  margin: 0;
}
.on {
  display: block;
}
.cont2 {
  width: 100%;
  height: 3.88rem;
  position: relative;
  background-size: cover !important;
}
.cont2_top {
  position: absolute;
  width: 100%;
  box-sizing:border-box;
  padding:0 20px;
  top: 0.476rem;
  text-align: center;
  font-size: 0.192rem;
  font-size:max(0.192px,22px);
 /* font-family: HarmonyOS_Sans_SC_Medium; */
  font-weight: 400;
  color: #ffffff;
}
.cont2_top .tit1 {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 0.192rem;
  font-size:max(min(0.192rem,42px),22px);
 /* font-family: HarmonyOS_Sans_SC_Medium; */
  font-weight: 400;
  color: #ffffff;
}
.cont2_top .tit2 {
  width: 100%;
  text-align: center;
  font-size: 0.064rem;
  font-size:max(0.064rem,12px);
 /* font-family: HarmonyOS_Sans_SC; */
  font-weight: 400;
  color: #ffffff;
}
.cont2_list {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display:flex;
}
.cont2_item {
    flex:1;
  /*width: 25%;*/
  height: 100%;
  padding-bottom: 0.36rem;
  padding-top:40%;
  box-sizing: border-box;
  float: left;
  display: flex;
  align-items: center;
  justify-content: end;
  flex-direction: column;
  position: relative;
}
.cont2_item::after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: '';
  width: 1px;
  height: 100%;
  background: linear-gradient(to top, #36393e, transparent);
}
.cont2_item:last-child::after {
  display: none;
}
.cont2_item:hover {
  background: url(https://ecomoss.ks3-cn-beijing.ksyuncs.com/assets/resources/cont2_active.png) no-repeat;
  background-size: 100% 100%;
}
.cont2_item:hover .cont2_item_img {
  display: flex;
  justify-content: center;
}
.cont2_item_img {
  width: 100%;
  height: auto;
  margin-bottom: 0.2rem;
  display: none;
  transition: 0.5s;
}
.cont2_item_img img {
  width: 0.252rem;
  height: auto;
}
.cont2_item .cont2_item_tit {
  width: 100%;
  height: auto;
}
.cont2_item .cont2_item_tit p {
  width: 100%;
  padding: 0 0.192rem;
  box-sizing: border-box;
  height: auto;
  font-size: 0.096rem;
  font-size:max(min(0.096rem,24px),16px);
 /* font-family: HarmonyOS_Sans_SC_Medium; */
  font-weight: 400;
  color: #ffffff;
  line-height: 0.128rem;
  text-align: center;
}
.cont3 {
  width: 100%;
  height: auto;
  padding: 0.3rem 0 0.25rem ;
  background-size:cover;
}
.cont3_top {
  width: 100%;
  height: auto;
}
.cont3_top .tit1 {
  width: 100%;
  height: auto;
  font-size: 0.192rem;
  font-size:max(min(0.192rem,42px),22px);
 /* font-family: HarmonyOS_Sans_SC_Medium; */
  font-weight: 400;
  color: #333333;
  line-height: 0.248rem;
  text-align: center;
}
.cont3_top .tit2 {
  padding-bottom: 0.14rem;
  width: 100%;
  height: auto;
  font-size: 0.064rem;
  font-size:max(min(0.064rem,16px),12px);
 /* font-family: HarmonyOS_Sans_SC; */
  font-weight: 400;
  color: #333333;
  /*line-height: 0.104rem;*/
  text-align: center;
  margin-top: 0.08rem;
}
.cont3_list {
  width: 100%;
  height: auto;
}
.cont3_list_top {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  margin-top: 0.25rem;
}
.cont3_list_two{
    flex-wrap: wrap;
}
.cont3_list_two .cont3_list_item{
    width:calc((100% / 3) - 20px);
    margin:0 10px 0.25rem;
}
.cont3_list_item {
  padding: 0 0.12rem;
  height:0.4rem;
  min-width: 1.12rem;
  box-sizing: border-box;
  width: auto;
  background: url(https://ecomoss.ks3-cn-beijing.ksyuncs.com/assets/resources/cont3_item_bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 0.3rem;
}
.cont3_list_item p {
  width: 100%;
  text-align: center;
}
.cont3_list_item .num {
  font-size: 0.08rem;
  font-size:max(0.08rem,12px);
  font-weight: 400;
  color: #0064d2;
}
.cont3_list_item .num span {
  display: inline-block;
  height: 100%;
  font-size: 0.208rem;
  font-size:max(min(0.208rem,42px),22px);
  font-weight: 400;
  color: #0064d2;
}
.cont3_list_item .tit {
  height: 40%;
  font-size: 0.064rem;
  font-size:max(0.064rem,12px);
  font-weight: 400;
  color: #333333;
  margin-top: 0.04rem;
}
.cont4 {
  width: 100%;
  height: auto;
  background: url(https://ecomoss.ks3-cn-beijing.ksyuncs.com/assets/resources/cont4_bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 0.47rem 0 0.47rem ;
  box-sizing: border-box;
}

.cont4  .image-text-content {
    margin-top: 0.307rem;
    display: flex;
    
}

.cont4  .text-content {
    position: relative;
    width: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


.cont4  .text-content .tit {
    padding-bottom:0.1rem;
    font-size: 0.12rem;
    color:#000;
}

.cont4  .text-content .text {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 0.326rem;
     font-size: 0.07rem;    
    line-height: 0.12rem;
    color:#9aa4af;
    
}

.cont4  .image-content {
    flex: 1;
    position: relative;
    height: 2.384rem;
}

.cont4 .text-content {
    background: #fff;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
}



.cont4  .image-content .image {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.cont4  .image-content .image img {
   position: absolute;
    left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}


.cont4  .image-content .list {
    padding: 0;
    position: relative;
    display: flex;
    width: 100%;
    z-index: 2;
    height: 100%;
}
.cont4  .image-content .list li:last-child {
    border: 0 none;
}
.cont4  .image-content .list li {
 
    border-right: 1px solid rgba(255, 255, 255, .3);
    flex: 1;

    display: flex;
    flex-direction: column;
    color: #fff;
    text-align: center;
  
}

.cont4  .image-content .list li .number {
    padding: 0.08rem 0 0.02rem ;
    font-size: 0.158rem;
}

.cont4  .image-content .list li .text {
    padding: 0 0.115rem;
    font-size: 0.061rem;
    line-height: 0.0923rem;
}

.deco {
    
    display: block;
    width: 0.22rem;
    height:  0.22rem;
    opacity: 1;
    transition: .1s;
    transform: translateZ(0);
    margin: 0.8rem auto 0;
}

.deco:before {

    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) scale(1);
    transition: .4s;
    border: 1px solid hsla(0, 0%, 100%, .3);
    border-radius: 100%;
    height: 0.13rem;
    width: 0.13rem;
}

.deco i,
.deco em {
    background: hsla(0, 0%, 100%, .8);
    border: 1px solid #fff;
    border-radius: 100%;
    height: 0.069rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) scale(1);
    transition: .4s;
    width: 0.069rem;
}

.deco:after {
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) scale(1);
    transition: .4s;
    border: 1px solid hsla(0, 0%, 100%, .1);
    border-radius: 100%;
     width: 0.192rem;
    height:  0.192rem;
}

.cont4  .image-content .list li:hover .deco:before {
    animation: scalepulse 1.3s linear .3s infinite both;
    transform: translate3d(-50%, -50%, 0) scale(1);
}

.cont4  .image-content .list li:hover .deco i,
.cont4  .image-content .list li:hover .deco em {
    background: #fff;
    animation: scalepulse 1.3s linear 0s infinite both;
    transform: translate3d(-50%, -50%, 0) scale(1);
}

.cont4  .image-content .list li:hover .deco:after {
    animation: scalepulse 1.3s linear .15s infinite both;
    transform: translate3d(-50%, -50%, 0) scale(1);
}



@keyframes scalepulse {
    20% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.3);
        transform: translate3d(-50%, -50%, 0) scale(1.3);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease
    }

    50% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease
    }
}





.cont4_top {
  width: 100%;
  height: auto;
}
.cont4_top .bigtit {
  width: 100%;
  height: auto;
  font-size: 0.192rem;
  font-size:max(min(0.192rem,42px),22px);
 /* font-family: HarmonyOS_Sans_SC_Medium; */
  font-weight: 400;
  color: #333333;
  text-align: center;
}
.cont4_top .smalltit {
  width: 100%;
  height: auto;
  font-size: 0.064rem;
  font-size:max(0.064rem,12px);
 /* font-family: HarmonyOS_Sans_SC; */
  font-weight: 400;
  color: #000000;
  line-height: 0.104rem;
  text-align: center;
  margin-top: 0.12rem;
}
.cont4_list {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 0.24rem;
}
.cont4_item {
  width: 49%;
  margin-right: 2%;
  height: auto;
  position: relative;
  float: left;
  margin-top: 2%;
  overflow: hidden;
  border-radius: 5px;
}
.cont4_item:nth-child(2n) {
  margin-right: 0%;
}
.cont4_item img {
  width: 100%;
  height: auto;
  transition: 0.5s;
}
.cont4_item_info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.cont4_item_num_source {
  font-size: 0.184rem;
  font-size:max(min(0.184rem,32px),22px);
 /* font-family: HarmonyOS_Sans_SC_Medium; */
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}
.cont4_item_tit {
  font-size: 0.128rem;
  font-size:max(min(0.128rem,24px),16px);
  /* font-family: HarmonyOS_Sans_SC_Light; */
  font-weight: 400;
  color: #ffffff;
  opacity: 0.6;
}
.cont4_item .cont4_item_detail {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: initial;
  position: relative;
}
.cont4_item .cont4_item_detail::after {
  position: absolute;
  content: '';
  left: 50%;
  top: calc(50% - 0.16rem);
  height: 0.32rem;
  width: 1px;
  background: #7b96d7;
}
.cont4_item:first-child .cont4_item_info .left {
  width: auto;
  height: auto;
}
.cont4_item:hover img {
  transform: scale(1.1);
}


.layer4 {
 width: 100%;
  background-color: #0064d2;
  overflow: hidden;
  position: relative;
}

.layer4 .map_container {
  /* width: 6.02rem; */
  /* padding: 0.92rem 0 0.36rem 0; */
  position: relative;
}

.layer4 .map_container .map {
      max-width: 1490px;
   margin: 0 auto;
}

.layer4 .info {
  z-index: 2;
  top: 0;
  width: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  padding-top: 0.3rem;
}

.layer4 .title_container h4 {
  font-weight: 500;
  font-size: 0.2rem;
  font-size:max(min(0.2rem,42px),22px);
}

.layer4 .map_container img {
  width: 100%;
}
.layer4 .server_icon_container_s {
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
  position: absolute;
  top: 0.5rem;
  left: 50%;
  margin-left: -0.5rem;
}
.layer4 .server_icon_container_s img.bg {
  width: 100%;
}
.layer4 .server_icon_container_s img.logo {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  padding: 0.28rem;
  object-fit: contain;
}
.layer4 #layer4_svg {
  width: 6.02rem;
  margin: 0.92rem auto 0.36rem auto;
}
.layer4 .btn_container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.1rem;
}
.layer4 .btn_container .btn {
  border: 2px solid #ffffff;
  border-radius: 0.03rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 0.04rem;
  cursor: pointer;
  font-size: 0.05rem;
  font-size:max(0.05rem,12px);
  padding: 0.06rem 0.18rem;
  white-space: nowrap;
  color: #fff;
}
.layer4 .btn_container .btn:hover,
.layer4 .btn_container .btn.active {
  background-color: #fff;
  color: #0064d2;
  transition: 0.2s;
}

.layer4 .num {
  position: relative;

  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.layer4 .num-warp {
    margin: 0.1rem 0 0.3rem;
}
.layer4 .num .num_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 0.19rem;
  line-height: 1;
  padding: 0 0.11rem;
}


.layer4 .num.show{
    display: flex;
}
.layer4 .num img {
  width: 0.2rem;
  display: block;
}
.layer4 .num .num_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 0.19rem;
  
  line-height: 1;
  padding: 0 0.11rem;
}
.layer4 .num .num_item .text {
  /* margin-top: 0.05rem; */
  font-size:max(min(0.24rem,42px),22px);
}
.layer4 .num .num_item .text b {
  font-size: 0.24rem;
  font-size:max(min(0.24rem,42px),22px);
  font-weight: 500;
}
.layer4 .num .num_item .text i {
  font-style: normal;
}
.layer4 .num .num_item .des {
  font-size: 0.06rem;
  font-size:max(0.06rem,12px);
}
@media only screen and (max-width: 1000px) {
    .cont4 .image-text-content{
        flex-direction: column;
    }
    
    
    .cont4 .image-content .list li .number {
        padding: 0.02rem 0;
        font-size: 0.2rem;
    }
    
     .cont4 .image-content .list li .text {
         font-size: 0.12rem;
     }
   
    .cont4 .text-content {
        width: 100%;
    }
    
    .cont4 .image-content .list {
        flex-direction: column;
    }
    
    .cont4 .image-content .list li {
        padding: 0.1rem 0;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .3);
    }
    
    .deco {
        margin: 0 auto;
    }
    
    
    .cont4 .text-content .text {
        margin: 0 0.1rem 0.1rem;
         position: relative;
        top: 0;
        transform: none;
        font-size: 0.12rem;
        line-height: 0.2rem;
    }
    
    
    
    .cont2_list{
        display: block;
    }
  .cont3{
    padding-left: 20px;
    padding-right: 20px;
    padding-top:0.4rem;
  }
  .cont3_list_two .cont3_list_item{
    margin: 0 0.1rem;
  }
  .cont4{
    padding: 0.47rem 20px 0.47rem 20px;
  }
  .cont4_top .smalltit{
    line-height: normal;
  }
  .cont2_item{
      padding: 24px 0;
      height: auto;
      width:100%;
      /*height:50%;*/
      border-top:1px solid #616161;
      border-left:1px solid #616161;
      box-sizing:border-box;
  }
  .cont2_item:nth-child(odd){
      border-left:none;
  }
  .cont2{
      background-size:cover;
      /*height:60vh;*/
      height: auto;
      box-sizing: border-box;
      padding-top:20vh;
  }
  .cont2_item .cont2_item_tit p{
      line-height:1.5;
  }
  .cont4_item{
      display:block;
      margin-right:0;
      width:100%;
  }
}