.qq_b {
    text-align: center;
    font-family: 'Satoshi-Bold';
    color: #333;
}

.qq_line {
    width: 85px;
    height: 1px;
    background: var(--yx_Color);
    margin: 25px auto 0;
}

.mapBox {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(146deg, #F0F6FF 0%, #BCCDE6 100%);
}

.map_cen{
    position: relative;
}

.map_cen img{
    width: auto;
    max-width: 100%;
}

.mapli {
    width: auto;
    position: absolute;
}

.gn1:before {
    content: '';
    width: 19vw;
    height: 19vw;
    min-width: 120px;
    min-height: 120px;
    background: rgb(194 131 49 / 6%);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mapli .zbTb {
    width: 31px;
    height: 31px;
    position: relative;
    z-index: 10;
}

.mapli .zbyuan{
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    left: 50%;
    width: 9px;
    height: 9px;
    background: var(--yx_Color);
    border-radius: 50%;
}

.mapli .zbyuan:before,.mapli .zbyuan:after{
    content: '';
    background: rgba(37, 101, 197, 0.3);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    -webkit-transform: translate(-50%, -50%) scale(1) translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
}

.mapli .zbyuan:before {
    animation: kuosan 2.2s linear 0s infinite;
    -webkit-animation: kuosan 2.2s linear 0s infinite;
}

.mapli .zbyuan:after {
    animation: kuosan 2.2s linear 0.8s infinite;
    -webkit-animation: kuosan 2.2s linear 0.8s infinite;
}

/* 标准关键帧：使用 scale */
@keyframes kuosan {
  0% {
    transform: translate(-50%, -50%) scale(1);       /* 24px */
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4);   /* ≈1.667 */
    opacity: 1;
  }
  75% {
    transform: translate(-50%, -50%) scale(1.8);   /* ≈2.083 */
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);   /* =2.5 */
    opacity: 0.2;
  }
}

/* WebKit 兼容关键帧 */
@-webkit-keyframes kuosan {
  0% {
    transform: translate(-50%, -50%) scale(1);       /* 24px */
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4);   /* ≈1.667 */
    opacity: 1;
  }
  75% {
    transform: translate(-50%, -50%) scale(1.8);   /* ≈2.083 */
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);   /* =2.5 */
    opacity: 0.2;
  }
}

.mapli .fnt_20{
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 60px;
    transition: 0.6s all;
    background: url(/static/en/img/bj011.png) no-repeat;
    width: 150px;
    height: 51px;
    background-size: cover;
    color: #fff;
    text-align: center;
    line-height: 56px;
    font-family: 'Satoshi-Bold';
    opacity: 0;
    z-index: 11;
    pointer-events: none;
}

.mapli:hover .fnt_20{
    opacity: 1;
    top: 55px;
}

.gnli .zbyuan{
    background: #C28231;
}

.gnli .zbyuan:before{
    background: rgb(194 130 49 / 30%);
    width: 16px;
    height: 16px;
}

.gnli .zbyuan:after{
    background: rgb(194 130 49 / 30%);
    width: 16px;
    height: 16px;
}

.gn1 .fnt_20{
    opacity: 1!important;
    background: transparent!important;
    color: #C28331;
    width: 200px!important;
    line-height: 1.4;
    top: -5vw!important;
        font-size: 20px !important;
}

.gnli .fnt_20{
    font-size: 16px;
}

.gnli:hover .fnt_20{
    top: 36px;
}

.map_biao {
    width: fit-content;
    margin: 2vw auto 6vw;
    display: flex;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid #A7BFE0;
}

.biaoli {
    font-size: 16px;
    color: #333333;
    font-weight: 350;
    padding-left: 25px;
    position: relative;
}

.biaoli:before{
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    left: 0;
    top: 6px;
    border-radius: 50%;
}

.biao2{
    margin-left: 70px;
}

.biao1:before{
    background: #228CFA;
}

.biao2:before{
    background: #C28331;
}

.qq_con2 {
    width: 100%;
    overflow: hidden;
    background: url(/static/en/img/bg012.png) no-repeat;
    background-position: center bottom;
    background-size: cover;
}


.qq_con2 .roll_box {
    width: 100%;
}

.qq_con2 .roll_box .roll {
    width: 100%;
    overflow: hidden;
    margin-bottom: 25px;
}

.qq_con2 .roll_box .roll ul {
    display: flex;
}

.qq_con2 .roll_box .roll li {
    width: 310px;
}

.qq_con2 .roll_box .roll li .roll_img{
    width: 260px;
    overflow: hidden;
    border-radius: 0 20px;
}

.qq_con2 .roll_box .roll li .roll_img img{
    width: auto;
    max-width: 100%;
}

@media only screen and (max-width: 1440px) {
    .qq_con2 .roll_box .roll li {
    width: 170px;
}

.qq_con2 .roll_box .roll li .roll_img{
    width: 150px;
    overflow: hidden;
    border-radius: 0 20px;
}

.qq_con2 .roll_box .roll li .roll_img img{
    width: auto;
    max-width: 100%;
}
}

@media only screen and (max-width: 769px) {
    .mapBox{
        margin-top: 30px;
    }
    
    .qq_con2 .mt60{
       margin-top: 30px;
    }
    
    .qq_con2 .mt40{
        margin-top: 20px;
    }
    
    .mapli .zbyuan:after{
        display: none;
    }
    
    .mapli .zbyuan:before{
        display: none;
    }
    
    .gn1 .fnt_20{
            top: -22vw !important;
    }
}