article,
aside,
blockquote,
body,
button,
code,
dd,
details,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
input,
legend,
li,
menu,
nav,
ol,
p,
pre,
section,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0
}

body,
button,
input,
select,
textarea {
  font-family: Microsoft YaHei, arial, SimSun, sans-serif
}

body {
  font-size: 14px
}

input,
select,
textarea {
  font-size: 100%
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

a,
button,
input,
textarea {
  outline: none
}

button {
  cursor: pointer
}

textarea {
  resize: none
}

fieldset,
img {
  border: 0
}

address,
cite,
code,
dfn,
em,
i,
th,
var {
  font-style: normal;
  font-weight: 400
}

ol,
ul {
  list-style: none
}

caption,
th {
  text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: 400
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sup {
  top: -.5em
}

sub {
  bottom: -.25em
}

a {
  text-decoration: none
}

.clearfix:after,
.clearfix:before {
  content: "";
  display: table
}

.clearfix:after {
  clear: both;
  overflow: hidden
}

.clearfix {
  *zoom: 1
}

.fl {
  float: left
}

.fr {
  float: right
}

.hidenone {
  display: none
}

.hide {
  visibility: hidden
}

.mt10 {
  margin-top: 10px
}

.mt20 {
  margin-top: 20px
}

.ml10 {
  margin-left: 10px
}

.pt10 {
  padding-top: 10px
}

.pt20 {
  padding-top: 20px
}

.pl10 {
  padding-left: 10px
}

.pr10 {
  padding-right: 10px
}

.tc {
  text-align: center
}

.vm {
  display: inline-block;
  vertical-align: middle
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

body {
  font-size: 12px;
  color: #666;
  background-color: #fff
}

a {
  color: #333
}

a:hover {
  text-decoration: none
}

.a-file {
  color: #666
}

.tr {
  text-align: right
}

.fs14 {
  font-size: 14px
}

.fs16 {
  font-size: 16px
}

.icon,
.inline-block {
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: middle
}

.display-block {
  display: block
}

input,
textarea {
  outline: none
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.color-green {
  color: #78c11a
}

.color-gray-dark {
  color: #333
}

.color-yellow {
  color: #f78d00
}

.color-red {
  color: #ff3e03
}

.bg-gray {
  background-color: #f8f8f8
}

.bg-white {
  background-color: #fff
}

.bg-yellow {
  background-color: #fcf9e4
}

.pos-r {
  position: relative
}

.mt25 {
  margin-top: 25px
}

.mt15 {
  margin-top: 15px
}

.mt35 {
  margin-top: 35px
}

.mb10 {
  margin-bottom: 10px
}

.mt5 {
  margin-top: 5px
}

.ml20 {
  margin-left: 20px
}

.ml40 {
  margin-left: 40px
}

.ml5 {
  margin-left: 5px
}

.mr10 {
  margin-right: 10px
}

.wrap {
  width: 1200px;
  margin: 0 auto
}

.title {
  text-align: center
}

.title .name {
  color: #2b2b2b;
  font-size: 32px;
  font-weight: 700
}

.title .name .icon-j {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../images_pocket/icon-all.png) no-repeat;
  vertical-align: -5px
}

.title .name .icon-j-l {
  background-position: -116px 73%
}

.title .name .icon-j-r {
  background-position: -116px 90.5%
}

.title .brief {
  font-size: 18px;
  color: #999
}

.banner {
  width: 100%;
  position: relative;
}

.district-one {
  padding: 30px 0 60px
}

.district-one .list {
  margin-top: 65px
}

.district-one .list i {
  display: inline-block;
  background: url(../images_pocket/icon-all.png) no-repeat;
  background-size: 300%
}

.district-one .list i.icon1 {
  width: 52px;
  height: 55px;
  background-position-x: -3px
}

.district-one .list i.icon2 {
  width: 55px;
  height: 55px;
  background-position-y: -80px
}

.district-one .list i.icon3 {
  width: 52px;
  height: 55px;
  background-position-y: -173px
}

.district-one .list i.icon4 {
  width: 52px;
  height: 55px;
  background-position: -4px -273px
}

.district-one .list i.icon5 {
  width: 52px;
  height: 55px;
  background-position: -4px -378px
}

.district-one .list li {
  display: inline-block;
  width: 154px;
  margin: 0 41px;
  text-align: center;
  vertical-align: text-top
}

/* .district-one .list li:nth-child(4) .describe {
  letter-spacing: -1px
} */

.district-one .list span {
  display: block
}

.district-one .list .name {
  font-size: 20px;
  font-weight: 700;
  color: #0dc2b3
}

.district-one .list .describe {
  line-height: 21px;
  font-size: 14px;
  color: #999
}

.district-two {
  width: 100%;
  height: 685px;
  padding-top: 90px;
  background: #f8f8f8 url(../images_pocket/2.jpg) no-repeat 50%
}

.district-two .list {
  margin: 100px 0 0 50px
}

.district-two .list li {
  margin: 35px 0
}

.district-two .list i {
  float: left;
  display: inline-block;
  width: 60px;
  height: 76px;
  line-height: 76px;
  margin-right: 25px;
  background: url(../images_pocket/icon-all.png) no-repeat;
  background-size: 290%
}

.district-two .list i.icon1 {
  background-position: 100% -2%
}

.district-two .list i.icon2 {
  background-position: 100% 20.8%
}

.district-two .list i.icon3 {
  background-position: 100% 46%
}

.district-two .list .size {
  line-height: 38px;
  font-size: 24px;
  color: #2b2b2b
}

.district-four,
.district-three {
  padding: 90px 0
}

.district-four .img {
  width: 1034px;
  height: 437px;
  margin: 40px 83px 0
}

.map-dynamic {
  position: relative;
  width: 726px;
  height: 555px;
  margin: 50px 0 0 39.5%;
  background: url(../images_pocket/map.png) no-repeat
}

.map-dynamic .x-circle {
  position: absolute
}

.map-dynamic .x-circle .dot {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #0dc2b3;
  border-radius: 50px;
  transform: translate(-50%, -50%)
}

.map-dynamic .x-circle .diff {
  position: absolute;
  top: -32px;
  left: -35px
}

.map-dynamic .x-circle .diff i {
  position: absolute;
  border: 1px solid #0dc2b3;
  border-radius: 100%;
  box-shadow: inset 0 0 10px rgba(13, 194, 179, .32);
  opacity: 0
}

.map-dynamic .x-circle .diff i.diff1,
.map-dynamic .x-circle .diff i.diff2,
.map-dynamic .x-circle .diff i.diff3 {
  top: 50%;
  left: 50%
}

.map-dynamic .x-circle .diff.diff-small {
  width: 50px;
  height: 50px
}

.map-dynamic .x-circle .diff.diff-small i {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  animation: scales1 6s linear infinite
}

.map-dynamic .x-circle .diff.diff-small i.diff2 {
  animation-delay: 1s
}

.map-dynamic .x-circle .diff.diff-small i.diff3 {
  animation-delay: 2s
}

.map-dynamic .x-circle .diff.diff-medium {
  width: 80px;
  height: 80px
}

.map-dynamic .x-circle .diff.diff-medium i {
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  animation: scales1 4s linear infinite
}

.map-dynamic .x-circle .diff.diff-medium i.diff1 {
  animation-delay: 1s
}

.map-dynamic .x-circle .diff.diff-medium i.diff2 {
  animation-delay: 2s
}

.map-dynamic .x-circle .diff.diff-medium i.diff3 {
  animation-delay: 3s
}

.map-dynamic .x-circle .diff.diff-big {
  width: 100px;
  height: 100px
}

.map-dynamic .x-circle .diff.diff-big i {
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  animation: scales1 5s linear infinite
}

.map-dynamic .x-circle .diff.diff-big i.diff1 {
  animation-delay: 1s
}

.map-dynamic .x-circle .diff.diff-big i.diff2 {
  animation-delay: 2s
}

.map-dynamic .x-circle .diff.diff-big i.diff3 {
  animation-delay: 3s
}

.map-dynamic .x-circle-1 {
  top: 46%;
  right: 178px
}

.map-dynamic .x-circle-2 {
  top: 51.5%;
  right: 232px
}

.map-dynamic .x-circle-3 {
  top: 57%;
  right: 167px
}

.map-dynamic .x-circle-4 {
  top: 60.2%;
  right: 171px
}

.map-dynamic .x-circle-5 {
  top: 62%;
  right: 110px
}

.map-dynamic .x-circle-6 {
  top: 65.2%;
  right: 135px
}

.map-dynamic .x-circle-7 {
  top: 68%;
  right: 195px
}

.map-dynamic .x-circle-8 {
  top: 78%;
  right: 138px
}

.map-dynamic .x-circle-9 {
  top: 65.5%;
  right: 212px
}

.map-dynamic .x-circle-10 {
  top: 71%;
  right: 250px
}

.map-dynamic .x-circle-11 {
  top: 81%;
  right: 250px
}

.map-dynamic .x-circle-12 {
  top: 83%;
  right: 310px
}

.map-dynamic .x-circle-13 {
  top: 96%;
  right: 280px
}

.map-dynamic .x-circle-14 {
  top: 79%;
  right: 406px
}

.map-dynamic .x-circle-15 {
  top: 62%;
  right: 545px
}

.map-dynamic .x-circle-16 {
  top: 45%;
  right: 388px
}

.map-dynamic .x-circle-17 {
  top: 50%;
  right: 335px
}

.map-dynamic .x-circle-18 {
  top: 54%;
  right: 280px
}

.map-dynamic .x-circle-19 {
  top: 63%;
  right: 320px
}

.map-dynamic .x-circle-20 {
  top: 39%;
  right: 285px
}

.map-dynamic .x-circle-21 {
  top: 43%;
  right: 221px
}

.map-dynamic .x-circle-22 {
  top: 41%;
  right: 245px
}

.map-dynamic .x-circle-23 {
  top: 36%;
  right: 190px
}

.map-dynamic .x-circle-24 {
  top: 32%;
  right: 115px
}

.map-dynamic .x-circle-25 {
  top: 25%;
  right: 92px
}

.map-dynamic .x-circle-26 {
  top: 20%;
  right: 78px
}

.map-dynamic .img-left {
  position: absolute;
  top: 25px;
  left: -50%;
  width: 497px;
  height: 534px
}

@keyframes scales1 {
  0% {
    transform: scale(0);
    opacity: 1
  }

  25% {
    transform: scale(.6);
    opacity: .6
  }

  50% {
    transform: scale(1);
    opacity: 0
  }

  to {
    transform: scale(0);
    opacity: 0
  }
}

.district-six {
  padding-top: 90px
}

.district-six .list {
  margin-top: 50px;
  text-align: center
}

.district-six .list li {
  display: inline-block;
  width: 23%;
  text-align: center
}

.district-six .list .num {
  font-size: 50px;
  color: #0dc2b3
}

.district-six .list .name {
  font-size: 16px;
  color: #2b2b2b
}

.district-six .img {
  width: 947px;
  height: 505px;
  margin: 30px 126.5px -3px
}

.x-divide {
  margin-top: 50px;
  background: url(../images_pocket/bg2.png) no-repeat 50%
}

.x-divide .x-left,
.x-divide .x-right {
  display: table-cell;
  width: 1%;
  height: 485px;
  padding-top: 120px;
  vertical-align: middle
}

.x-divide .x-left .x-icon,
.x-divide .x-right .x-icon {
  display: inline-block;
  width: 35px;
  height: 35px;
  background: url(../images_pocket/icon-2.png) no-repeat
}

.x-divide .x-left .x-line,
.x-divide .x-right .x-line {
  margin-bottom: 10px
}

.x-divide .x-left .x-xian,
.x-divide .x-right .x-xian {
  display: inline-block;
  width: 26px;
  height: 3px;
  background-color: #000
}

.x-divide .x-left .x-title,
.x-divide .x-right .x-title {
  font-size: 26px
}

.x-divide .x-left .x-brief,
.x-divide .x-right .x-brief {
  line-height: 30px;
  margin-top: 40px;
  font-size: 18px;
  color: #fff;
  opacity: 0;
  transition: opacity .4s cubic-bezier(.4, 0, .2, 1)
}

.x-divide .x-left {
  padding-right: 120px;
  text-align: right
}

.x-divide .x-left .x-icon {
  background-position: 7px 0
}

.x-divide .x-right {
  padding-left: 120px;
  text-align: left
}

.x-divide .x-right .x-icon {
  background-position: 0 -62px
}

.x-divide .x-left:hover,
.x-divide .x-right:hover {
  padding-top: 0;
  color: #fff;
  background: rgba(97, 206, 195, .75);
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.x-divide .x-left:hover .x-line,
.x-divide .x-right:hover .x-line {
  opacity: 0;
  transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.x-divide .x-left:hover .x-line .x-xian,
.x-divide .x-right:hover .x-line .x-xian {
  background: #fff
}

.x-divide .x-left:hover .x-title,
.x-divide .x-right:hover .x-title {
  color: #fff;
  margin-top: -16px;
  transition: all .2s cubic-bezier(.4, 0, .2, 1)
}

.x-divide .x-left:hover .x-brief,
.x-divide .x-right:hover .x-brief {
  opacity: 1
}

.x-divide .x-left:hover .x-icon {
  background-position: -51px 0
}

.x-divide .x-right:hover .x-icon {
  background-position: -53px -62px
}

.district-seven {
  padding: 90px 0
}

.district-seven .list {
  width: 900px;
  margin: 56px auto 0
}

.district-seven .list li {
  display: inline-block;
  width: 210px;
  height: 145px;
  margin: 0 4px 7px 0;
  padding: 10px;
  text-align: center;
  background-color: #fff;
  vertical-align: text-top
}

.district-seven .list li i {
  display: inline-block;
  width: 38px;
  height: 38px;
  margin-top: 25px;
  background: url(../images_pocket/icon-all1.png) no-repeat;
  background-size: cover
}

.district-seven .list li i.icon-1 {
  background-position: -1px 4px
}

.district-seven .list li i.icon-2 {
  background-position: 0 -46px
}

.district-seven .list li i.icon-3 {
  background-position: 0 -101px;
  height: 39px
}

.district-seven .list li i.icon-4 {
  background-position: 0 -168px
}

.district-seven .list li i.icon-5 {
  background-position: 0 -232px
}

.district-seven .list li i.icon-6 {
  background-position: 0 -300px
}

.district-seven .list li i.icon-7 {
  background-position: 0 -371px
}

.district-seven .list li i.icon-8 {
  background-position: 0 -439px
}

.district-seven .list li .name {
  margin-top: 5px;
  font-size: 22px;
  color: #2b2b2b
}


/*20190301 add hjkan增加底部*/
.float-layer.show {
  bottom: 0;
}
.float-layer.close {
  bottom: -180px;
}
.float-layer {
  bottom: -180px;
}
.float-layer {
	position: fixed;
	left: 0;
	height: 130px;
	background: rgba(0, 0, 0, .6);
	width: 100%;
  z-index: 99;
  transition: all 1s ease;
}
.float-layer .inner {
	position: relative;
	width: 1000px;
	height: 100%;
	margin: 0 auto;
}

.float-layer .pic {
	position: absolute;
	top: -37px;
	left: 80px;
}

.float-layer .txt {
	margin-left: 240px;
	color: #fff;
}

.float-layer .p1 {
	padding-top: 30px;
	font-size: 20px;
}

.float-layer .p2 {
	font-size: 30px;
	color: #0dc2b3;
}

.float-layer .code {
	position: absolute;
	right: 86px;
	top: -12px;
	width: 130px;
	height: 130px;
	padding: 3px;
	border: 1px solid #424347;
	background: #fff;
}
.float-layer .code img {
	width: 122px;
	height: 122px;
}

.float-layer .closed {
  position: absolute;
  cursor: pointer;
	right: 27px;
	top: 40px;
	width: 30px;
	height: 30px;
	background: url(../images_pocket/closed.png) no-repeat;
}