/* 公共样式表css */
/* html,
body {
color: #333;
margin: 0;
height: 100%;
font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
} */
/* * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
img {
border: 0;
}
body {
background: #fff;
color: #666;
font-family: 'Microsoft Yahei', 'PingFangSC', sans-serif;
} */
/* html,
body,
div,
dl,
dt,
dd,
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
button,
fieldset,
form,
input,
legend,
textarea,
th,
td {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #08acee;
}
button {
outline: 0;
}
img {
border: 0;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
outline: none;
}
li {
list-style: none;
}
a {
color: #666;
}
a:hover {
color: #eee;
} */
/* .clearfix::after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
} */
/* .clearfix {} */
/* 必要布局样式css */
.map-content {
padding: 30px 0;
}
.map-module {
/* width: 1200px !important; */
margin: 0 auto;
position: relative;
transition: all .3s ease;
}
.map-title {
font-size: 24px;
color: #333;
text-align: center;
margin: 50px 0;
position: relative;
}
.map-branch .map-title {
margin: 20px 0 0;
z-index: 1;
}
.map-title:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -23px;
left: 50%;
transform: translateX(-50%);
border: 6px solid;
border-color: #20B09F transparent transparent;
}
.map-title:after {
content: "";
position: absolute;
width: 52px;
height: 3px;
background-color: #20B09F;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
}
.map-content-info {
position: relative;
/* margin-bottom: 30px; */
}
.branch-map-l {
/* width: 849px;
height: 575px; */
position: relative;
}
.w100 {
width: 100%;
}
.map-content-box {
width: 100%;
height: 100%;
/* background: url("../images/map-bj.png") no-repeat center; */
position: relative;
}
.map-dot {
position: absolute;
text-align: center;
font-size: 12px;
cursor: pointer;
}
.beijing {
left: 36%;
top: 22%;
}
.tianjin {
left: 545px;
top: 467px;
}
.hebei {
left: 38%;
top: 61%
}
.shanxi {
left: 52%;
top: 67%;
}
.liaoning {
left: 54%;
top: 78%;
}
.jilin {
left: 71%;
top: 86%
}
.heilongjiang {
left: 64.5%;
top: 53%;
}
.shanghai {
left: 66.5%;
top: 49%;
}
.jiangsu {
left: 60%;
top: 30%;
}
.beijing1 {
left: 46%;
top: 39%;
}
.tianjin1 {
left: 30%;
top: 45%;
}
.hebei1 {
left: 23%;
top: 41.5%;
}
.shanxi1 {
left: 21%;
top: 53%;
}
.liaoning1 {
left: 22%;
top: 80%;
}
.jilin1 {
left: 29%;
top: 74%;
}
.heilongjiang1 {
left: 45.5%;
top: 61%;
}
.shanghai1 {
left: 82.5%;
top: 50%;
}
.jiangsu1 {
left: 67%;
top: 26%;
}
.beijing2 {
left: 39%;
top: 6%;
}
.tianjin2 {
left: 30%;
top: 13%;
}
.hebei2 {
left: 16.5%;
top: 47.5%;
}
.shanxi2 {
left: 25%;
top: 62%;
}
.liaoning2 {
left: 25%;
top: 83%;
}
.jilin2 {
left: 62%;
top: 79%;
}
.heilongjiang2 {
left: 78.5%;
top: 53%;
}
.shanghai2 {
left: 65%;
top: 51%;
}
.jiangsu2 {
left: 53%;
top: 45%;
}
.beijing3 {
left: 40%;
top: 19%;
}
.tianjin3 {
left: 15%;
top: 27%;
}
.hebei3 {
left: 38.5%;
top: 50.5%;
}
.shanxi3 {
left: 48%;
top: 54%;
}
.liaoning3 {
left: 56%;
top: 64%;
}
.jilin3 {
left: 79%;
top: 73%;
}
.heilongjiang3 {
left: 83.5%;
top: 57%;
}
.shanghai3 {
left: 89%;
top: 46%;
}
.beijing4 {
left: 20%;
top: 38%;
}
.tianjin4 {
left: 11%;
top: 37%;
}
.hebei4 {
left: 36.5%;
top: 39.5%;
}
.shanxi4 {
left: 10%;
top: 57%;
}
.liaoning4 {
left: 36%;
top: 58%;
}
.jilin4 {
left: 46%;
top: 57%;
}
.heilongjiang4 {
left: 87.5%;
top: 32%;
}
.diannao {
left: 46%;
top: 60%;
}
/* 新增应用 */
.power1 {
left: 14%;
top: 10%;
}
.power2 {
left: 18.5%;
top: 14.5%;
}
.power3 {
left: 48%;
top: 11%;
}
.power4 {
left: 50%;
top: 18%;
}
.power5 {
right: 17%;
top: 17%;
}
.power6 {
left: 21%;
top: 36.5%;
}
.power7 {
left: 44%;
top: 41.2%;
}
.power8 {
left: 45.5%;
top: 36.5%;
}
.power9 {
left: 46%;
top: 38.5%;
}
.power10 {
left: 49%;
top: 40.5%;
}
.power11 {
left: 51.5%;
top: 36%;
}
.power12 {
left: 60%;
top: 78%;
}
.power13 {
left: 59.5%;
top: 84.8%;
}
.power14 {
right: 18%;
top: 35%;
}
.power15 {
left: 15%;
top: 62%;
}
.power16 {
left: 53%;
top: 61%;
}
.power17 {
right: 16%;
bottom: 39%;
}
.power18 {
bottom: 16%;
left: 37.5%;
}
.power19 {
left: 16%;
bottom: 15.5%;
}
.power20 {
right: 19%;
bottom: 16.2%;
}
.power21 {
bottom: 14.6%;
right: 16%;
}
.power22 {
bottom: 13.2%;
right: 14.5%;
}
.material1 {
top: 16%;
left: 62%;
}
.material2 {
top: 21.5%;
left: 61%;
}
.material3 {
top: 25%;
left: 58%;
}
.material4 {
top: 27%;
left: 57%;
}
.material5 {
top: 36%;
left: 48%;
}
.material6 {
top: 38%;
left: 41.5%
}
.material7 {
top: 39%;
left: 47%;
}
.material8 {
bottom: 34%;
left: 61.5%;
}
.material9 {
bottom: 29%;
left: 60%;
}
.material10 {
bottom: 22%;
left: 54.5%;
}
.material11 {
bottom: 16.5%;
left: 49%;
}
.material12 {
bottom: 13.5%;
left: 45.5%;
}
.material13 {
bottom: 11.3%;
left: 49%;
}
/*
.electronic {
padding: 90px 6.8% 135px 6.8%;
} */
/* .jiangsu3 {
left: 53%;
top: 45%;
} */
/* .zhejiang {
left: 655px;
top: 379px;
}
.anhui {
left: 605px;
top: 334px;
}
.fujian {
left: 625px;
top: 428px;
}
.jiangxi {
left: 595px;
top: 402px;
}
.shandong {
left: 610px;
top: 284px;
}
.henan {
left: 562px;
top: 316px;
}
.hubei {
left: 555px;
top: 359px;
}
.hunan {
left: 545px;
top: 409px;
}
.guangdong {
left: 575px;
top: 466px;
}
.guangxi {
left: 506px;
top: 461px;
}
.chongqing {
left: 495px;
top: 364px;
}
.sichuan {
left: 425px;
top: 354px;
}
.guizhou {
left: 484px;
top: 424px;
}
.yunnan {
left: 405px;
top: 462px;
}
.shanxi1 {
left: 502px;
top: 312px;
} */
.map-dot:after {
content: "";
display: block;
width: 20px;
height: 20px;
margin: 0 auto;
/* background-color: #01B7BD; */
border-radius: 50%;
background: #fff url(../images/jia.png) no-repeat;
background-size: 100% 100%;
z-index: 22;
}
.map-dot.beijing:after {
/* width: 13px;
height: 12px;
border-radius: 0;
background: url("../images/icon-star.png") no-repeat center; */
}
.branch-map-data {
position: absolute;
box-sizing: border-box;
width: 260px;
border: 3px solid #0f93bc;
/* box-shadow: 0 0 2px 2px #e9e9e9; */
background-color: #fff;
padding: 10px 30px;
z-index: 1;
display: none;
}
.branch-map-data-title {
border-bottom: 1px solid #eee;
}
.branch-map-data-title p {
font-size: 18px;
color: #333;
line-height: 28px;
}
.branch-map-data-info {
max-height: 236px;
overflow-y: auto;
}
.data-branch {
border-bottom: 1px dashed #eee;
padding: 6px 0;
box-sizing: border-box;
}
.data-branch:last-child {
border: none;
}
a,
button,
input,
textarea {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.data-branch .data-name {
font-size: 14px;
color: #666;
line-height: normal;
margin-bottom: 5px;
}
.data-branch p {
font-size: 12px;
color: #999;
line-height: 20px;
}
.data-branch p {
font-size: 12px;
color: #999;
line-height: 20px;
}
.branch-map-data:before {
/* content: "";
position: absolute;
left: -16px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border: 8px solid;
border-color: transparent #01B7BD transparent transparent; */
}
.branch-map-data:after {
/* content: "";
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border: 8px solid;
border-color: transparent #fff transparent transparent; */
}
.map-dot:before {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
transform: translateX(-50%);
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid #01B7BD;
animation: dot 4s infinite;
}
@keyframes dot {
100% {
transform: translateX(-50%) scale(1);
opacity: 1;
}
50% {
transform: translateX(-50%) scale(1.5);
opacity: .1;
}
}
/* @media(max-width:1700px) {
.electronic {
padding: 90px 2% 135px 2%;
}
} */
@media(max-width:1700px) {
.beijing {
/* left: 498px;
top: 221px; */
}
.tianjin {
left: 33%;
top: 40%;
}
.hebei {
left: 38%;
top: 60%;
}
.shanxi {
left: 50%;
top: 65%;
}
.jilin {
left: 68%;
top: 85%;
}
}
@media(max-width:1366px) {
.beijing {
left: 477px;
top: 210px;
}
}
@media(max-width:1280px) {
.beijing {
left: 36%;
top: 22%;
}
}
@media(max-width:1024px) {
.shanghai {
left: 66.5%;
top: 48%;
}
}
@media(max-width:768px) {
.map-dot:after {
width: 12px;
height: 12px;
}
.map-dot:before {
width: 18px;
height: 18px;
}
.branch-map-data {
padding: 6px 10px;
width: 215px;
}
}
@media(max-width:480px) {
.branch-map-data {
position: static;
width: auto;
margin-top: 15px;
}
}