/* 固定高度 */
#network{
    min-height: 730px;
}
.allCountry {
    min-height: 378px;
}
/* english */
.english{
    width: 2rem;
    height: 2rem;
    position: absolute;
    /* background-color: red; */
    top: 24%;
    left:5%
}
.ripple-container{
    top: 0;
    left:0rem;
}
.english .hovers{
    width: 17rem;
    height: 2.5rem;
    top: 5px;
    left: 0%;
    display: none;
    z-index: 1;
}
.english .countryIcon1{
    top: -10%;
    left: -39%;
}
.english:hover .guoqi{
    opacity: 0;
}
.english:hover .hovers{
    display: block;
}

/* faguo */
.faguo{
    width: 3rem;
    height: 1rem;
    position: absolute;
    /* background-color: red; */
    top: 28%;
    left:8%
}
.ripple-container{
    top: 0;
    left:0rem;
}
.faguo .hovers{
    width: 14rem;
    height: 2.5rem;
    top: 2.5px;
    left: 0%;
    display: none;
}
.faguo .countryIcon2{
    top: 37%;
    left: 30%;
}
.faguo:hover .guoqi{
    opacity: 0;
}
.faguo:hover .hovers{
    display: block;
}

/* deguo */
.deguo{
    width: 3rem;
    height: 2rem;
    position: absolute;
    /* background-color: red; */
    top: 36%;
    left:3%
}
.ripple-container{
    top: 0;
    left:0rem;
}
.deguo .hovers{
    width: 14rem;
    height: 2.5rem;
    top: -17px;
    left: 27%;
    display: none;
    z-index: 1;
}
.deguo .countryPoint3{
    top: -31%;
    left: 42%;
}
.deguo .guoqi{
    left:14%;
}
.deguo:hover .guoqi{
    opacity: 0;
}
.deguo:hover .hovers{
    display: block;
}



/* china */
.china{
    width: 6rem;
    height: 3rem;
    position: absolute;
    top: 42%;
    left:34%
}
.ripple-container{
    top: 0;
    left:0rem;
}
.china .hovers{
    width: 14rem;
    height: 2.5rem;
    top: 5px;
    left: 1rem;
    display: none;
}
.china .countryIcon6{
    top: 26%;
    left: 3rem;
}
.china:hover .guoqi{
    opacity: 0;
}
.china:hover .hovers{
    display: block;
}


/* malai */
.malai{
    width: 3rem;
    height: 1rem;
    position: absolute;
    /* background-color: red; */
    top: 64%;
    left:32%
}
.ripple-container{
    top: 0;
    left:0rem;
}
.malai .hovers{
    width: 14rem;
    height: 2.5rem;
    top: 2.5px;
    left: 21%;
    display: none;
}
.malai .countryIcon4{
    top: 74%;
    left: 54%;
}
.malai:hover .guoqi{
    opacity: 0;
}
.malai:hover .hovers{
    display: block;
}


/* meiguo */
.meiguo{
    width: 3rem;
    height: 2rem;
    position: absolute;
    /* background-color: red; */
    top: 36%;
    left:73%
}
.ripple-container{
    top: 0;
    left:0rem;
}
.meiguo .hovers{
    width: 14rem;
    height: 2.5rem;
    top: -17px;
    left: 27%;
    display: none;
    z-index: 1;
}
.meiguo .countryPoint5{
    top: -31%;
    left: 42%;
}
.meiguo .guoqi{
    left:14%;
}
.meiguo:hover .guoqi{
    opacity: 0;
}
.meiguo:hover .hovers{
    display: block;
}


/* 默认元素全部隐藏 */
.newpage div{
    display: none;
}
.newpage .xianshi{
    display: block;
}

/* span元素跳动动画效果 */
.section-head p span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.section-head p span:hover {
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@media screen and (min-width: 800px) and (max-width: 1100px) {
    .china {
        top: 20%;
    }
    .malai {
        top: 30%;
    }
   .meiguo {
        top: 20%;
    }
   .english {
        top: 13%;
    }
    .faguo {
        top: 14%;
    }
   .deguo {
        top: 19%;
    }
   }