body,html{width:100%;height:100%;margin:0;padding:0;overflow:hidden;font-size:14px;font-family:PingFangSC-Regular,Arial,"微软雅黑","Hiragino Sans GB","新宋体",sans-serif}#banner{position:absolute;width:100%;height:60px;color:#fff;background-color:#2093ef;margin:0;z-index:100}#banner>.logo{position:absolute;width:198px;height:100%;background:url(../images/logo.png) no-repeat center center}.left{position:absolute;top:60px;height:100%;width:152px;background-color:#35383a;color:#c5c5c5}.left>ul{width:100%;list-style:none;margin:0;padding:0}.left li{height:50px;cursor:default;line-height:50px}.left li:hover{background-color:#232323;cursor:pointer}.left li.selected{background-color:#232323}.left li>span{width:16px;height:16px;margin-left:25px;display:inline-block;background:url(../images/template.png) no-repeat}.left li[data-name=marker]>span{background-position:0 0}.left li[data-name=cluster]>span{background-position:-48px 0}.left li[data-name=heatmap]>span{background-position:-64px 0}.left li[data-name=grade]>span{background-position:-32px 0}.left li[data-name=types]>span{background-position:-16px 0}.left li[data-name=grid]>span{background-position:-80px 0}.left li[data-name=polygontypes]>span{background-position:-96px 0}.left li[data-name=polygongrade]>span{background-position:-112px 0}.left li[data-name=other]>span{background-position:-128px 0}.left li>label{margin-left:10px}.right{position:absolute;top:60px;left:152px;box-sizing:border-box;background-color:#e3e4e5;padding:20px 40px;overflow-y:auto}.right>div{float:left;clear:both}.right .title{font-size:16px;font-weight:700;color:#767676;margin-left:20px;clear:both}.right .container{list-style:none;margin:10px;padding:0;float:left}.right .container>li{width:284px;height:264px;background-color:#fff;float:left;margin:10px 40px 20px 0;box-sizing:border-box;padding:10px;position:relative}.right .container>li:hover{box-shadow:0 0 16px rgba(0,0,0,.45)}.right .mapitem{width:100%;height:214px;position:relative}.right .mapitem>img{width:264px;height:214px}.right .mapitem>img:hover{background-color:rgba(163,163,163,.7)}.right .mapitem>a{width:264px;height:214px;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;color:rgba(255,255,255,0);text-align:center;display:block;box-sizing:border-box;position:absolute;top:0;background-color:rgba(163,163,163,0);transition:all .5s ease;opacity:0}.right .mapitem>a:hover{color:rgba(255,255,255,.9);background-color:rgba(0,0,0,.3);opacity:1}.right .mapitem>a>span{width:45px;height:45px;background:url(../images/magnifier.png);opacity:inherit;display:block;margin:60px auto 10px}.right .mapitem>a>label{cursor:pointer}.right .mapinfo{font-size:14px;color:#767676;padding:5px}.grey{background-color:#e3e4e5;overflow:auto}.grey>#banner{position:relative!important}.main{width:1280px;margin:0 auto;background-color:#fff;padding:30px 0;box-sizing:border-box;min-height:840px;display:block}.main .goback{color:#2093ef;font-size:14px;margin-left:40px;text-decoration:none;line-height:20px}.main .mapinfo{height:50px;line-height:50px;box-sizing:border-box;position:relative;min-width:600px}.main .mapinfo>label{font-size:18px;color:#3a3a3a;float:left;margin-left:40px}.main .mapinfo>span{font-size:14px;color:#767676;float:right;margin:0 20px}.main .mapinfo>div{font-size:18px;color:#3a3a3a;float:left;width:20%;text-align:center;display:inline-block;line-height:50px;max-height:50px;overflow:hidden}.main .mapinfo .mapname{text-align:left;text-indent:40px;width:40%}.main .mapinfo .author{font-size:14px;color:#767676;width:38%;text-align:right}#mapcontainer{width:1280px;height:688px;margin:0 auto}.main .shelter{width:100%;height:688px;background-color:rgba(163,163,163,.7);text-align:center}.main .share{width:100%;height:140px}.main .link{float:left;margin:24px 20px 0 40px}.main .link .icon{float:left;width:34px;height:34px;margin-right:10px}.main .link .icon>.pclink{width:30px;height:30px;background:url(../images/cpormobile.png);background-position:0 0;display:block}.main .link .icon>.phonelink{width:30px;height:30px;background:url(../images/cpormobile.png);background-position:-60px 0;display:block}.main .link>div{height:34px;margin-bottom:24px}.main .link input{float:left;width:700px;height:34px;box-sizing:border-box;border:2px solid #ddd;font-size:14px;color:#666;text-indent:10px;background-color:#f4f4f4}.main .link input.nolink{opacity:.4}.main .link input.nolink:hover{border-color:#ddd}.main .link input:hover{border-color:#397ea8}.main #mobile-qrcode{float:left;width:96px;height:96px;margin-top:24px}.main .footer{font-size:14px;color:#767676;width:100%;text-align:center}.main .platfrom{margin:auto;width:100px;height:30px;display:inline-block}.main .platfrom span{height:30px;width:30px;padding:5px;display:block;float:left}.main .platfrom>span.hover{cursor:pointer;background-color:#2093ef!important}.main .platfrom i{height:30px;width:30px;display:block}.main .platfrom .pcbtn>i{background:url(../images/cpormobile.png) no-repeat;background-position:0 0}.main .platfrom .mobilebtn>i{background:url(../images/cpormobile.png) no-repeat;background-position:-60px 0}.main .platfrom .pcbtn.hover>i{background-position:-30px 0}.main .platfrom .mobilebtn.hover>i{background-position:-90px 0}.main .platfrom span.selected{background-color:#2093ef!important}.main .platfrom .pcbtn.selected>i{background-position:-30px 0}.main .platfrom .mobilebtn.selected>i{background-position:-90px 0}