* {padding: 0;margin: 0;font-size:14px}
html,body {height: 100%;font-size: 14px;font-family: Microsoft Yahei,PingFang SC,Avenir,Segoe UI,Hiragino Sans GB,STHeiti,"Microsoft Sans Serif",WenQuanYi Micro Hei}
img {border: 0}
a {text-decoration: none; color: #333}
ul {list-style: none}
.fl {float: left}
.fr {float: right}
.fc:after {content: '';clear: both;display: block}
.fb {display: block}
body {min-width: 1505px; overflow-y: hidden}
.bg-box {background: #2c303a}

/* icos */
.area-ico {background: url(../images/map-ico.png) no-repeat center;width: 25px;height: 70px;margin-right: 5px;}
.tag-ico {background: url(../images/tag-ico.png) no-repeat right;width: 21px;height: 70px;margin-right: 5px;margin-left: 30px;border-left: 0;margin-top: 0;padding-left: 25px;}
.close-ico {background: url(../images/close-ico.png) no-repeat center; width: 20px; height: 24px}
.check-ico {background: #F9B13B url(../images/check-ico.png) no-repeat 5px 2px}
.bus-ico {background: #5CC0E0 url(../images/bus-ico.png) no-repeat 5px 4px}
.elf-driving-ico {background: #35B777 url(../images/elf-driving-ico.png) no-repeat 5px 3px}
.birthplace-ico {background: url(../images/birthplace-ico.png) no-repeat 0 0; width: 65px; height: 20px; padding-left: 28px; margin-top: 5px}
.life-ico {background: url(../images/life-ico.png) no-repeat 0 0; width: 65px; height: 20px; padding-left: 28px; margin-top: 5px}
.government-ico {background: url(../images/government-ico.png) no-repeat 0 0; width: 65px; height: 20px; padding-left: 28px; margin-top: 5px}
.traffic-ico {background: url(../images/traffic-ico.png) no-repeat 0 0; width: 65px; height: 20px; padding-left: 28px; margin-top: 5px}
.community-ico {background: url(../images/community-ico.png) no-repeat 0 0; width: 65px; height: 20px; padding-left: 28px; margin-top: 5px}


#area .area-title, #server-tag .tag-title{margin-top: 0;}

#area .area-str, #server-tag .tag-str {font-size: 18px;color: #2E86F2;}

/* top */
#top{width: 80%;margin-left: 40px;height: 70px;line-height: 70px;}
#top .logo .logo-ico {background: url(../images/ico.png) no-repeat center;width: 23px;height: 70px;}
#top .logo .logo-str {height: 67px;margin-left: 10px;width: 333px;background: url(../images/ico-str.png) no-repeat center;}
#top .search {height: 40px;overflow: hidden;background: url(../images/search_bg.png) no-repeat center;width: 354px;margin-top: 17px;}
#top .search input[type="text"] {background: none;height: 40px;line-height: 40px;border: 0;border-left: 0;outline: none;padding-left: 15px;color: #333;font-size: 17px;width: 284px;}
#top .search input[type="submit"] {color: #FFF;font-size: 16px;background: none;border: 0;padding: 0;width: 55px;outline: none;cursor: pointer;height: 40px;}
/* nav */
#nav{border-top: 0;height: 70px;line-height: 70px;}
#area {margin-left: 40px;margin-top: 0;padding-bottom: 0;}
#area .area-list li,
#server-tag .tag-list li {float: left}
#area .area-list a, #server-tag .tag-list a {font-size: 16px;color: #40424F;width: auto;height: 40px;line-height: 40px;text-align: center;margin-left: 20px;margin-top: 15px;padding: 0 10px;}
#area .area-list a:hover, #server-tag .tag-list a:hover {background:#2f86f3;color: #FFF; border-radius:3px}
#area .area-list span, #server-tag .tag-list span {cursor: pointer;background: none;border-radius: 1px;width: 25px;height: 70px;font-size: 12px;color: #2F86F3;text-align: center;line-height: 70px;margin-top: 0;margin-left: 10px;}
#server-tag {margin-top: 0;}
.server-marking .area-ico{height: 30px;width: 29px;}
/* map-features */
#map {width: 100%}
#map-features {height: 90%;position: relative}
#map-features .features-nav {width: 20%; height: 100%; background: #FFF; position: relative}
#map-features .features-nav::before {content: ''; border-left: 1px solid #a2c8ff; height: 100%; position: absolute; right: 0}
#map-features .features-nav .nav {margin-top: 5%}
#map-features .features-nav .nav-item p {text-align: center}
#map-features .features-nav .nav-item {width: 33.33333%; margin-bottom: 25px; position: relative}
#map-features .features-nav .nav-item .items-list {position: absolute; top: 115px; background: #fff; padding: 15px 0 0; width: 353px; z-index: 99; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8}
#map-features .features-nav .nav-item .items-list a {border: 1px solid #e8e8e8; border-radius: 3px; height: 38px; text-align: center; line-height: 38px; font-size: 16px; color: #868686; padding: 0 10px; margin: 0 0 15px 15px}
#map-features .features-nav .nav-item .items-list a:hover {background: #4089E5; color: #FFF; cursor: pointer}
#map-features .features-nav img {width: 60px; height: 60px; margin: 0 auto 15px; display: block}
#map-features .shrink {z-index: 10;position: absolute; background: #4089e5 url(../images/left-arrow-ico.png) no-repeat center; width: 41px; height: 76px; right: -40px; top: 43%; border-top-right-radius: 3px; border-bottom-right-radius: 3px}
#map-features .shrink1 {background: #4089e5 url(../images/right-arrow-ico.png) no-repeat center;}
#map-features .map-box {width: 80%; background: #FFF; height: 100%; position: relative}
#map-features .map-box .current-position {width: 100%; height: 35px; line-height: 35px; color: #969696; background: #e8ffe8; position: absolute; z-index: 30}
#map-features .current-position-ico {background: url(../images/current-position-ico.png) no-repeat center; width: 27px; height: 35px; margin: 0 10px 0 20px}
.current-position-ico {background: url(../images/current-position-ico.png) no-repeat center; width: 27px; height: 30px; margin: 0 10px 0 -15px}
#map-features .range-search {background: url(../images/search-position.png) no-repeat 0 3px; width: 75px; height: 35px; padding-left: 31px}
#map-features .result-list .result-item {padding: 10px; border: 1px solid #e3e3e3; border-radius: 3px; margin-bottom: 15px}
#map-features .result-list .result-item p {margin-bottom: 5px}
#map-features .result-list span {width: 51px; height: 20px; line-height: 20px; color: #FFF; padding: 2px 5px; border-radius: 3px; text-align: right; margin-right: 3%}
#map-features .result-list .page-number a {background:#f3f3f3; border-radius:2px; width:24px; height:24px; color:#626262; font-size: 12px; padding: 0 5px}
#map-features .result-list .page-number .selected {background:#4089e5; color: #FFF}
#area-marking, #server-marking, #range-search-marking {position: absolute; left: 0; right: 0; margin: 10% auto 0; width: 790px; z-index: 30}
#area-marking .title, #server-marking .title, #range-search-marking .title {background: #FFF;border-bottom: 4px solid #16FFE7;padding: 15px 30px;}
#area-marking .title-str, #server-marking .title-str, #range-search-marking .title-str {font-size: 18px;color: #333;margin-top: 3px;}
#area-marking .items, #server-marking .items, #range-search-marking .items {background: #fff;padding-bottom: 20px;max-height: 295px;overflow-y: scroll;}
#area-marking .items a, #server-marking .items a {cursor: pointer;border: 1px solid #e8e8e8; border-radius: 3px; height: 38px; text-align: center; line-height: 38px; font-size: 16px; color: #868686; padding: 0 10px; margin: 15px 0 0 15px}
#server-marking .search {padding: 15px}
#range-search-marking .items {padding-left: 10px; border-left: 1px solid #ddd; margin-right: 10px; padding-bottom: 0}
#range-search-marking .items a {margin-right: 10px; margin-bottom: 5px; margin-top: 5px}
#range-search-marking .group {padding:10px 20px 0}
#server-marking .search label {height: 35px; line-height: 35px; margin-right: 10px}
#server-marking .search input[type="text"] {height: 33px; line-height: 33px; border-radius: 3px; border: 1px solid #DDD; width: 200px}
#server-marking .search input[type="submit"] {background: #357CFF; border: 0; height: 35px; width: 50px; border-radius: 3px; color: #FFF; margin-left: 10px}
#server-marking .tag-list-title {margin-left: 15px;padding-top: 10px;}
#map-features .features-nav .search-result { padding: 25px; }
#map-features .features-nav .search-result-title {font-size:24px; color:#357cff; margin-bottom: 20px}
#map-features .features-nav .search-tag .tag-item {background: #efefef; border-radius: 3px; width: 70px; height: 30px; line-height: 30px; text-align: center; margin-right: 10px; margin-bottom: 10px; font-size: 14px; color: #868686;}
#map-features .result-title {margin-top: 5px}
#map-features .result-title div {background: #f3f3f3; border-radius: 1px; width: 65%; height: 36px; text-align: left; line-height: 36px; padding-left: 5%}
#map-features .result-title span {margin: 0 5px; color: #377DFE}
#map-features .result-title a {background: #f3f3f3 url(../images/return-ico.png) no-repeat 15px center; border-radius: 1px; height: 36px; line-height: 36px; margin-left: 5px; width: 50px; text-align: center; padding-left: 20px}
#map-features .result-list {max-height: 610px;overflow-y: scroll;margin-top: 10px; padding-right: 10px}
#map-features .navigation-from {margin: 10px 0 0}
#map-features .navigation-from input[type="text"] {padding: 0px 10px; height: 25px; width: 85%; border: 1px solid #e3e3e3; border-radius: 3px; margin-bottom: 10px}

/* position */
.content-body {overflow-y: auto}
#position {padding-left: 155px; padding-top: 8px; padding-bottom: 20px}
#position .position-box {width: 63%; margin: 0 auto}
#position a {background: #4089e5; font-size: 16px; color: #ffffff; height: 36px; line-height: 36px; text-align: center; padding: 0 10px; border-radius: 3px}
#position span {background: #4089e5; font-size: 16px; color: #ffffff; height: 36px; line-height: 36px; text-align: center; margin-left: 5px; padding: 0 10px; margin-right: 5px; border-radius: 3px}
#content {width: 60%; margin: 20px auto 50px}
#content .content-title {font-size: 24px; color: #357cff; margin-bottom: 20px}
#content table {border: 1px solid #d6d6d6; font-size: 14px; border-collapse: collapse}
#content table th {width: 180px; background: #fafafa; color: #336688; font-weight: bold; text-align: right}
#content table td {border-bottom: 1px solid #ececec; padding: 6px 8px; line-height: 24px; vertical-align: top}
#content table th, #content table td {border-bottom: 1px solid #ececec;padding: 6px 8px;line-height: 24px; vertical-align: top}

a.gotomap{ float:right; margin:0px 0 0 10px; height:20px; width:69px;background:url(../images/gotomap.gif) no-repeat; margin-top:2px; cursor:pointer}
#area-marking .area-ico {height: 30px;width: 29px;}

.qr{position: absolute;width: 110px;height: 110px;background: #DDD;right: 1%;top: 10%;}
.qr img{width: 100%;height: 100%;}
.title-str{margin-top: 3%;}