﻿/* CSS Document */
.blockinfo.mapbrand{ width:100%; height:100%; font-size:14px;}
.mapbrand .mapbg{ width:100%; height:100%; margin:0 auto; overflow:hidden;}
.mapbrand .map{ width:85%; height:100%;position: relative; float:left;}
.mapbrand .title{ position:absolute; left:20px; top:12px; white-space:nowrap; font-size:32px; line-height:58px; font-weight:100; color:#fff; padding:0 16px 0 16px; z-index:1;}
.mapbrand .title:hover{ color:#f90;}
.style2 .mapbrand .title{ color:#666;}
.style2 .mapbrand .title:hover{ color:#f60;}
.mapbrand .title .model_data{ display:inline-block !important;}
.mapbrand .title .l{ position:absolute; left:0; top:0; width:10px; height:10px; border-top:2px solid; border-left:2px solid;}
.mapbrand .title .l:after{content:""; position:absolute; left:-2px; top:46px; width:10px; height:10px; border-bottom:2px solid; border-left:2px solid;}
.mapbrand .title .r{ position:absolute; right:0; top:0; width:10px; height:10px; border-top:2px solid; border-right:2px solid;}
.mapbrand .title .r:after{content:""; position:absolute; right:-2px; top:46px; width:10px; height:10px; border-bottom:2px solid; border-right:2px solid;}
.mapbrand .result{ width:15%; max-height: 100%; float:right; background:#fff; position:relative; border-radius:12px;}
.mapbrand .result dt{ background:#888ec1; color:#fff; text-align:center; line-height:0.5rem; font-size:16px; padding:0 10px; border-radius:12px 12px 0 0;}
.style2 .mapbrand .result dt{ background:#be0f1b}
.mapbrand .result dd{padding:0 10px;}
.mapbrand .result dd .item{ display:block; padding:0.095rem 0; border-bottom:1px solid #f3f3f3;}
.mapbrand .result dd .item:hover{ color:#f60;}
.mapbrand .result dd .item .img{ width:1.1rem; height:0.48rem; display:block; margin:0 auto; transition:all ease-in-out 100ms;}
.mapbrand .result dd .item:hover .img{ transform:scale(1.1)}
.mapbrand .result dd .btn{ width:100%; color:#888ec1; text-align:center; padding:0 10px; font-size:14px; line-height:0.48rem; display:block;}
.style2 .mapbrand .result dd .btn{color:#be0f1b;}
.mapbrand .result dd .btn:hover{color:#f60;}
.mapbrand .result dd .btn span,
.mapbrand .result dd .btn .iconfont{font-size:14px; display:inline-block; vertical-align:middle; margin:0 2px;}

.mapbrand .md_hotarea{position:absolute; left:2%; top:0.9rem; width:13%; background:rgba(220,173,154,0.15); padding:0 1% 0.1rem; font-size:15px; line-height:0.3rem; text-align:left; border-radius:8px; transition:all ease-in-out 300ms; z-index:2;}
.mapbrand .md_hotarea:hover{ background:rgba(255,255,255,.6);}
.mapbrand .md_hotarea .ttl{ font-size:16px; line-height:2.6em; color:#be0f1b; font-weight:bold; border-bottom:1px solid rgba(51, 51, 51, 0.1); text-align:center; border-radius:4px; margin-bottom:0.05rem; font-size:14px;}
.mapbrand .md_hotarea li{ width:50%; float:left; cursor:pointer; text-align:center; border-radius:4px; font-size:12px;}
.mapbrand .md_hotarea li:hover{ background:rgba(220,173,154,0.3)}

.mapbrand .md_group{ position:absolute; left:77%; top:46%; z-index:2; width:210px; background:rgba(255, 255, 255, 0.3); transition:all ease-in-out 300ms; opacity:1; border-radius:12px;}
.mapbrand .md_group.hide{ opacity:0;}
.mapbrand .md_group .ttl{ padding:0 10px; font-size:16px; line-height:2.5em; color:#fff; background:#888ec1; text-align:center; border-radius:12px 12px 0 0;}
.style2 .mapbrand .md_group .ttl{ background:#be0f1b;}
.mapbrand .md_group .catlist{padding:10px;}
.mapbrand .md_group .catlist li{ float:left; width:49%; margin:0 0.5%; line-height:28px; cursor:pointer; text-align:center;}
.mapbrand .md_group .catlist li a{ display:block;}
.mapbrand .md_group .catlist li:hover,
.mapbrand .md_group .catlist li.active,
.mapbrand .md_group .catlist li:hover a{color:#fff; background:#f60; border-radius:4px;}

.mapbrand .md_group .citylist{padding:10px; position:relative;}
.mapbrand .md_group .citylist:after{content:""; width:86%; height:1px; background:rgba(51, 51, 51, 0.1); position:absolute; top:0; left:7%;}
.mapbrand .md_group .citylist ul li{float:left; width:49%; margin:0 0.5%; line-height:28px; cursor:pointer; text-align:center;}
.mapbrand .md_group .citylist ul li a{display:block; color:#be0f1b;}
.mapbrand .md_group .citylist ul li a span,
.mapbrand .md_group .citylist ul li a .iconfont{font-size:14px; display:inline-block; vertical-align:middle;}
.mapbrand .md_group .citylist ul li a span{max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.mapbrand .md_group .citylist ul li a .iconfont{margin-left:3px;}

.mapbrand .md_group .btn{ width:97%; margin:0 auto; background:#eee; color:#555ba6; text-align:center; margin-top:4px; line-height:32px; display:block;}
.mapbrand .md_group .btn:hover{ color:#f60;}
.style2 .mapbrand .md_group .btn{ color:#be0f1b;}
.style2 .mapbrand .md_group .btn:hover{ color:#f60;}

@keyframes cityDotAni{from{text-shadow: none}to{text-shadow: 0 0 4px #FFF,0 0 6px #FFF}}
@-webkit-keyframes cityDotAni{from{text-shadow: none}to{text-shadow: 0 0 4px #FFF,0 0 6px #FFF}}
@font-face{font-family:'mapicon';src:url('../fonts/iconfont_5b0a5675.eot');src:url('../fonts/iconfont_5b0a5675.eot') format('embedded-opentype'),url('../fonts/iconfont_3c110ab4.woff') format('woff'),url('../fonts/iconfont_267b7f8e.ttf') format('truetype');font-weight:normal;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.inlineBl{display: -moz-inline-box;-moz-box-orient: vertical;display: inline-block;vertical-align: middle;*vertical-align: auto;*zoom: 1;*display: inline}
.map .shengming{position:absolute; z-index:1; bottom:20px; left:20px; width:330px; word-break:break-all; text-align:justify; line-height:1.6em; color:rgba(255,255,255,0.7); font-size:12px; animation:myfirst 1s linear 0s 1 forwards;}
.style2 .map .shengming{color:rgba(51,51,51,0.7);}
.style2 .map .shengming a{color:#be0f1b;}
.style2 .map .shengming a:hover{color:#f60;}
@keyframes myfirst {0%{opacity:0;}90%{opacity:0;}100%{opacity:1;}}
.map .mapBox{position: absolute;width: 100%; height: 100%;left: 0;top: 0;overflow: hidden;}
.map .mapBox .loadingFailTip{position: relative;top: 50%;margin-top: -10px;color: #999;text-align: center}
.map .mapBox .loadingFailTip em{font-family: iconFont;margin-right: 5px;font-size: 16px;line-height: 20px}
.map .mapBox .loadingFailTip a:link,.map .mapBox .loadingFailTip a:hover{color: #629cdf}
.map .mapBox .extLayer{position: absolute;z-index: 2}
.map .mapBox .wholeMapBtn{display: none;filter: alpha(opacity= 0);-khtml-opacity: 0;-moz-opacity: 0;opacity: 0;display: block;width: 66px;height: 66px;top: -60px;background: url(../images/wholemapbtn_7e9ba833.png)}
.map .mapBox .wholeMapBtn:hover{background: url(../images/wholemapbtn_hover_56e1a369.png)}
.map .mapBox .infoLayer .cityDot{text-decoration:none;font-family: iconFont;position: absolute;display: block;width: 12px;height: 12px;color: #5995d3;margin-top: -6px;margin-left: -6px;-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);transform: scale(0)}
.map .mapBox .infoLayer .cityDot.breath{-webkit-animation: cityDotAni 1.5s 10 alternate;animation: cityDotAni 1.5s 10 alternate}
.map .mapBox .mapCanvas{position: absolute; left:0; top:0;z-index: 0}
.map .mapBox .mapCanvas .noInteraction{pointer-events: none}
.map .mapBox .mapCanvas .layer{fill: #FFF;stroke: #ccc;stroke-linejoin: round;stroke-linecap: round}
.style2 .map .mapBox .mapCanvas .layer{fill:rgba(220, 173, 154, 0.3); stroke:rgba(250, 247, 231, 0.3);}
.map .mapBox .mapCanvas .layer a{outline: 0}
.map .mapBox .mapCanvas .layer .boundary{display: none}
.map .mapBox .mapCanvas .layer .shadow{fill:#ccc;stroke: none}
.style2 .map .mapBox .mapCanvas .layer .shadow{fill:rgba(220,173,154,0.3);}
.map .mapBox .mapCanvas .layer .area{-webkit-transition: fill .2s,stroke .2s;-moz-transition: fill .2s,stroke .2s;-o-transition: fill .2s,stroke .2s;transition: fill .2s,stroke .2s;cursor: pointer}
.map .mapBox .mapCanvas .layer .area:hover,.map .mapBox .mapCanvas .layer .area.show{fill: #a5ccf8;stroke: #8ebbee}
.style2 .map .mapBox .mapCanvas .layer .area:hover,
.style2 .map .mapBox .mapCanvas .layer .area.show{fill:rgba(190, 15, 27, 0.3); stroke:rgba(250, 247, 231, 0.3);}
.map .mapBox .mapCanvas .layer .area.nourl{fill: #ccc;stroke: #aaa}
.map .mapBox .mapCanvas .layer .nameRect{position: absolute;display: block; z-index:4;}
.map .mapBox .mapCanvas .layer .nameRect .nameBg{fill: none;stroke: none}
.map .mapBox .mapCanvas .layer .nameRect .name{-webkit-transition: fill .2s;-moz-transition: fill .2s;-o-transition: fill .2s;transition: fill .2s;fill: #666;stroke: none;text-anchor: middle;alignment-baseline: middle;white-space: nowrap;font-size: 12px; cursor:pointer;}
.map .mapBox .mapCanvas .layer .nameRect:hover .name{fill: #f90}
.style2 .map .mapBox .mapCanvas .layer .nameRect .name{fill:#333;}
.style2 .map .mapBox .mapCanvas .layer .nameRect:hover .name{fill:#be0f1b;}
.map .mapBox .mapCanvas .masked{fill:rgba(255,255,255,0.1);stroke: rgba(0,0,0,0.1)}
.style2 .map .mapBox .mapCanvas .masked{fill:rgba(255,255,255,0.2);stroke: rgba(220,173,154,0.2)}
.map .mapBox .mapCanvas .masked .boundary,.map .mapBox .mapCanvas .masked .shadow{display: none}
.map .mapBox .mapCanvas .masked .area:hover{fill: #a5ccf8;stroke: #cbcac8}
.map .mapBox .mapCanvas .masked .nameRect .nameBg{fill: #ebebeb}
.style2 .map .mapBox .mapCanvas .masked .nameRect .nameBg{fill:rgba(220,173,154,0.4)}
.map .mapBox .mapCanvas .masked .nameRect .name{fill: #888}
.map .mapBox .mapCanvas .masked .nameRect.cur .nameBg{fill: #a5ccf8;stroke: #608ec6}
.map .mapBox .mapCanvas .masked .nameRect.cur .name{fill: #FFF}
.map .mapBox .mapCanvas .sublayer .area,.map .mapBox .mapCanvas .sublayer .area:hover{cursor: default;fill: #fafafa;stroke: #ccc}
.style2 .map .mapBox .mapCanvas .sublayer .area, .map .mapBox .mapCanvas .sublayer .area:hover{stroke:rgba(220,173,154,0.4);}
.map .mapBox .mapCanvas .sublayer .boundary{display: block;stroke: #b5b5b5}
.style2 .map .mapBox .mapCanvas .sublayer .boundary{stroke:rgba(220,173,154,0.3);}
.map .mapBox .mapCanvas .sublayer .shadow{fill: #bbb}
.map .mapBox .mapCanvas .sublayer .nameRect .name{fill: #aaa}
.map .mapBox .mapCanvas .sublayer .online{fill: #FFF;cursor: pointer!important}
.map .mapBox .mapCanvas .sublayer .online:hover,.map .mapBox .mapCanvas .sublayer .online.cur{fill: #a5ccf8;stroke: #8ebbee}
.map .mapBox .mapCanvas .sublayer .online .name{fill: #666}
.map .mapBox .southChinaSea{filter: alpha(opacity= 0);-khtml-opacity: 0;-moz-opacity: 0;opacity: 0;display: none;width: 96px;height: 112px;background: url('../images/bluemap.png') no-repeat;border: solid 1px rgba(0, 0, 0, 0.2);}
.mapNav{display:none;}
.style2 .map .mapBox .southChinaSea{background: url('../images/redmap.png') no-repeat; border:solid 1px rgba(220, 173, 154, 0.3);}
.cityOfflineTip{pointer-events: none;background: #FFF;color: red;padding: 1px 9px;box-shadow: none;line-height: 16px;border: solid 1px #BBB;border-radius: 2px}

.map .color100000{ color:#9900FF;}

#model-data-list .color100000{ color:#9900FF;}
.map .color100001{ color:#9900FF;}

