body, html, div, ul, li, p, span { padding: 0px; margin: 0px; font-family: 'Microsoft YaHei'; }
body, html { width: 100%; height: 100%; overflow: hidden; }
ul, li { list-style: none; }
div.flex { flex: 1; }
div.flexColumn { display: flex; flex-direction: column; }
.bodyContainer { width: 100%; height: 100%; background-position: center; min-width: 1366px; }
.bodyContainer > .header { width: 100%; height: 40px; padding: 30px 0 30px 0; display: flex; }
.bodyContainer > .header div.line { flex: 1; height: 3px; background: #0089ff; margin-top: 18px; }
.bodyContainer > .header div.title { flex: none; width: 440px; height: 40px; text-align: center; line-height: 40px; font-weight: bolder; font-size: 16pt; border-right: 5px solid #0089ff; border-left: 5px solid #0089ff; }
.bodyContainer > .content { height: calc(100% - 120px); width: calc(100% - 40px); padding: 0px 20px 20px 20px; display: flex; }
.bodyContainer > .content > div { display: flex; flex-direction: column; }
.bodyContainer > .content div.side { width: 24%; }
.bodyContainer > .content .center { margin: 0px 20px; }
.bodyContainer > .content .center div.centerContent { display: flex; flex-direction: column; }
#dvCenterImage { background-position: center; background-repeat: no-repeat; display: inline-block; position: relative; }
#dvCenterImage .point { position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 15px; display: inline-block; border-style: solid; border-width: 9px 10px 10px 10px; }
#dvCenterImage .point::before, .point::after { width: 0; height: 0; left: -5px; top: 17px; position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top-style: solid; border-top-width: 17px; content: ' '; }
#dvCenterImage .point1 { border-color: red; }
#dvCenterImage .point1::before, .point1::after { border-top-color: red; }
#dvCenterImage .point2 { border-color: yellow; }
#dvCenterImage .point2::before, .point2::after { border-top-color: yellow; }
#dvCenterImage .point .dialog { width: 366px; height: 120px; background: url(../imgs/map-shop.png) no-repeat center; position: absolute; left: 0px; top: -30px; }
#dvCenterImage .point .dialog div { width: 250px; height: 60px; margin-left: 80px; margin-top: 30px; text-align: left; line-height: 30px; font-weight: bolder; font-size: 20pt; color: #ffff44; }
#dvCenterImage .point1 .dialog { display: none; }
#dvCenterImage .point2 .dialog { display: inline-block; animation: mapcon ease 1 0.8s 0s both; }

@keyframes mapcon {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0px); opacity: 1; }
}

#dvCenterImage .point2 .pulse { background: rgba(244,234,42,0.2); border-radius: 50%; height: 14px; width: 14px; position: absolute; transform: rotateX(55deg); }
#dvCenterImage .point2 .pulse:after { content: ""; border-radius: 50%; height: 40px; width: 40px; position: absolute; margin: 20px 0 0 -22px; animation: pulsate ease-out infinite 1s 1.1s; box-shadow: 0 0 1px 2px #f4ea2a; }

@keyframes pulsate {
    0% { transform: scale(0.1, 0.1); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.2, 1.2); opacity: 0; }
}

.borderbox { flex: 1; border: 1px solid #20558b; position: relative; margin-top: 20px; background-color: rgba(0,24,106,0.5); }
.borderbox:first-child { margin-top: 0px; }
.borderbox .rd { position: absolute; border: 3px solid #0089ff; width: 25px; height: 25px; }
.borderbox .rd-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.borderbox .rd-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.borderbox .rd-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.borderbox .rd-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.borderbox > .title1 { width: calc(100% - 30px); height: 35px; line-height: 35px; color: #fff; font-weight: 600; padding-left: 15px; }
.borderbox > .title2 { width: 158px; height: 43px; background: url('../imgs/titlebg.png') no-repeat; position: absolute; top: -22px; left: 50%; margin-left: -74px; color: #fff; font-size: 18px; font-weight: 600; line-height: 43px; text-align: center; }
.borderbox > .main { width: 100%; height: calc(100% - 35px); }
.borderbox > .title2 + .main { margin-top: 35px; }

.totaltext { width: 80%; background: url('../imgs/totaltextbg.png') no-repeat; background-size:contain; margin: 8px auto; }
.totaltext .text { width: 50%; margin-left: 40%; padding-top: 4%; box-sizing: border-box; }
.totaltext .text .label { color: #fff; font-weight: 600; font-size: 100%; }
.totaltext .text .value { font-weight: 600; color: #ffff44; font-size: 150%; }


.totle-num { width: 500px; height: 120px; position: absolute; top: 0px; left: 0px; z-index: 1000; }
.totle-num > p { font-size: 18px; font-weight: 600; color: #fff; }
.totle-num span { display: inline-block; width: 45px; height: 65px; text-align: center; line-height: 65px; background-color: #0089ff; color: #fff; font-size: 68px; font-weight: 600; font-family: "LcdD"; margin-top: 15px; }
.totle-num span.split { background-color: transparent; }