.earthMapContainer{opacity: 1;transition: opacity 0.3s;width: 100%;height: 100vh;max-height: 1113px;overflow: hidden;background-color: #ededed;background-image: url(./images/earth_bg.jpg);position: relative;background-position: center;background-size:cover;background-repeat: no-repeat;}
.earthMapContainer.show{}
#earthMap{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 5;overflow: hidden;}
#earthMap canvas{position: absolute;z-index: 5;top: 0;left: 0}
#earthMap .shadow{display:none;pointer-events: none;width: 100%;height: 56.963%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;z-index: 1;}
#earthMap .shadow .con{width: 100%;height: 100%;display: flex;justify-content: center;}
#earthMap .shadow img{width: auto;height: 100%;display: block;}
#earthMap .shadow1 img{transform: translate3d(15%,15%,0);}
#earthMap .shadow2{z-index: 10;}
.earthMapContainer.show #earthMap .shadow{display: block;}
.earthMapContainer .arrow{position: absolute;top: 0;bottom: 0;margin:auto;z-index: 10;width: 11.15vw}
.earthMapContainer .arrow.left{left: 17%}
.earthMapContainer .arrow.right{right: 17%}
.earthMapContainer .arrowwap{display: none;}
.earthMapContainer .instro{
	width: 100%;
    position: absolute;
    bottom: 8.36vh;
    left: 0;
    z-index: 20;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.earthMapContainer .instro p{
	font-size: 1.5rem;
    color: #000;
}
.earthMapContainer .instro span{
	font-size: 3rem;
    font-family: sourceHanSansCN-Medium2, PingFangSC-Medium;
    font-weight: 500;
    color: #255897;
}
.earthMapPop{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding-bottom: 1rem;
    display: block;
    opacity: 0;
    transform: translate3d(0,100%,0);
    transition:opacity 0.3s,transform 0.3s;
}
.earthMapPop.show{
    transform: translate3d(0,0,0);
    opacity: 1
}
.earthMapPop .wrap{
	width: 88%;
	margin:0 auto;
	background-color: #fff;
	padding: 2rem;
    position: relative;
}
.earthMapPop .close{
    position: absolute;
    z-index: 10;
    width: 3rem;
    height: 3rem;
    right: 0.5rem;
    top: 1rem;
    background-image: url(./images/close.png);
    background-size: 1.3rem;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.earthMapPop .con{
    display: none;
    width: 100%;
    opacity: 0;transition: opacity 0.3s;
}
.earthMapPop .con.show{opacity: 1;display: block;}
.earthMapPop h2 em{
    font-size: 40px;
    font-family: 'sourceHanSansCN-ExtraLight2';
    color: #000;
    font-weight: 100;
    display: none;
}
.earthMapPop h2 span{
    font-size: 40px;
    /*margin-left: 10px;*/
    font-family: 'sourceHanSansCN-Regular2';
    color: #000;
    font-weight: normal;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
}
.earthMapPop .scrollbox{width: 100%;height: auto;max-height: 20rem;}
.earthMapPop .itembox{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.earthMapPop .item{
    width: 12.5%;
    margin-top: 1.5rem;
}
.earthMapPop .item .img{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding: 0 1rem;
}
.earthMapPop .item .img img{
    width: auto;
    height: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.earthMapPop .item p{
    width:95%;
    text-align: center;
    margin:8px auto 0;
    font-family: 'sourceHanSansCN-Regular2';
    font-size: 16px;
    line-height: 20px;
}
.earthMapPop .item .img .nor{
    display: block;
}

.earthMapPop .item .img .act{
    display: none;
}
.earthMapPop .item .go{
    width: 20px;
    display: block;
    height: auto;
    margin:8px auto 0;
    opacity: 0;
    transition: opacity 0.3s;
}
.earthMapPop .item:hover .nor{
    display: none;
}
.earthMapPop .item:hover .act{
    display: block;
}
.earthMapPop .item:hover .go{opacity: 1}
@media screen and (max-width:1740px) {
    .earthMapContainer .arrow.left{left: 10%}
    .earthMapContainer .arrow.right{right: 10%}
}
@media screen and (max-width:1600px) {
    .earthMapPop .item{width: 16.666%}
}
@media screen and (max-width:1360px) {
    .earthMapContainer .arrow.left{left: 5%}
    .earthMapContainer .arrow.right{right: 5%}
}
@media screen and (max-width:1140px) {
    .earthMapContainer .arrowpc{display: none;}
    .earthMapPop .item{width: 20%}
}
@media screen and (max-width:750px) {
    .earthMapContainer{height: 118vw;max-height: none;background-image: url(./images/earth_bg_wap.jpg);}
    #earthMap{
        height: 74%
    }
    #earthMap .shadow{transform: scale(1.16);}
    .earthMapContainer .arrowwap{display: block;bottom: 26%}

    .earthMapContainer .instro{
        bottom: 5rem;
    }
    .earthMapContainer .instro p{
        font-size: 1.2rem;
    }
    .earthMapContainer .instro span{
        font-size: 2.5rem;
    }
    .earthMapPop h2 em{
        font-size: 2.4rem;
    }
    .earthMapPop h2 span{
        font-size: 1.6rem;
        /*margin-left: 0.8rem;*/
        border-width: 1px;padding-bottom: 0.5rem;
    }
    .earthMapPop .scrollbox{}
    .earthMapPop .item{width: 33.3%}
    .earthMapPop .item .img{height: 2.2rem}
    .earthMapPop .item p{font-size: 12px;line-height: 16px;}
    .earthMapPop .item .go{display: none;}
    .earthMapPop .wrap{padding: 1.2rem}
}