@charset "utf-8";
/*通用样式*/
html, body, div, span, iframe, map, font, img, a img, samp, strong, hr, h1, h2, h3, h4, h5, h6, b, p, blockquote, a, address, code, dl, dt, dd, ol, ul, li, form, label, table, tr, td, th{ padding: 0; margin: 0; border: 0; font-weight: normal; font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;  list-style:none;}
html, body { position: relative; height: 100%;}
body{ background:#fff; font:normal 12px/22px "微软雅黑";  }
img{ border:0;  }
.clear { clear:both;}
.clearfix { zoom:1;}
.clearfix:after { content:'\20'; display:block; height:0; clear:both;}
div { box-sizing:border-box;}

/* CSS Document */

.bg{position: relative;}
.bg img{display: block; width: 100%;}
.dian {
    position: relative;
    animation: bordershow 3s infinite;
}
.dian {
    position: relative;
    animation: bordershow 3s infinite;
}

.mc_a1t_xl span {
    opacity: 0;
}

.dian {
    display: block;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 5px solid #0090ff;
    border-radius: 50%;
	box-sizing: border-box;
}

.dian::before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.dian::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.dian::before {
    animation: boderM 3s .75s infinite;
}

.dian::after {
    animation: boderM 3s infinite;
}

@keyframes boderM {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0
    }

    20% {
        opacity: 1
    }

    75% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0
    }

    100% {
        opacity: 0
    }

}

@keyframes bordershow {

    50% {
        box-shadow: 0px 0px 10px 0 #001eb4;
    }

}

.text{ pointer-events: none; position: absolute; left: 30px; top: 50%; transform: translateY(-50%); font-size: 12px; text-align: center; line-height:1.25; color: #fff; padding:6px 20px; border-radius: 44px;
 white-space: nowrap; transition: 0.5s;}
.text::after{content: ''; position: absolute; left: 0; transition: 0.5s; border-radius: 44px; top: 0; height: 100%; width: 0; opacity: 0;background: rgba(0, 30, 180, .77);}
.text p{ opacity: 0; transition: all 0.5s; position: relative; z-index: 2;}
.bg li:hover { z-index: 10;}
.bg li:hover .text p{ opacity: 1; }
.bg li:hover .text::after{width: 100%; opacity: 1;}
.bg li:hover .text { pointer-events: auto;}
.dian1{position: absolute; z-index: 2; left: 79%; top:7%;}
.dian1 .text { left: 50%; transform: translate(-50%,0); top:30px;}

.dian2{position: absolute; z-index: 2; left:66%; top: 18%;}

.dian3{position: absolute; z-index: 2; left:62.5%; top:26.5%;}

.dian4{position: absolute; z-index: 2; left:56%; top:37%;}

.dian5{position: absolute; z-index: 2; left:50%; top:36%;}

.dian6{position: absolute; z-index: 2; left:45%; top:38%;}

.dian7{position: absolute; z-index: 2; left:31%; top:44%;}

.dian8{position: absolute; z-index: 8; left:26%; top:55%;}

.dian9{position: absolute; z-index: 8; left:24%; top:68%;}

.dian10{position: absolute; z-index: 8; left:20%; top:82%;}

.dian11{position: absolute; z-index: 8; left:23%; top:86%;}

.dian12{position: absolute; z-index: 8; left:32%; top:66%;}

.dian13{position: absolute; z-index: 8; left:42%; top:62%;}

.dian14{position: absolute; z-index: 8; left:58%; top:68%;}

.dian15{position: absolute; z-index: 8; left:67%; top:60%;}

.dian16{position: absolute; z-index: 8; left:76%; top:34%;}

@media (max-width:780px) {
	.text { transform: translate(-50%,0); left: 50%; top: 30px;}
}