/*.header .row {
  position: absolute;
  width: 100%;
}
*/
/*.menu ul {
  margin-bottom: 5px;
}*/

.banner {
  position: relative;
  background: #eeeeee;
}

.banner .container {
  padding: 6% 0 0 0;
  position: relative;
}

.banner img {
  position: absolute;
  width: 100%;
}
.banner .title-img{ width: 66%; }
.banner .title-img img{ position: relative; margin-left: -3%; }


/*.index-ban .swiper-wrapper{ max-width: 100%; }*/

.banner_title h2 {
  font-size: 5rem;
  margin-top: 20px;
  margin-bottom: 10px;
}
.banner .container{  z-index: 9; }

.banner_title p {
  width: 41%;
  font-size: 1.25rem;
  line-height: 1.25em;
  line-height: 1.42857143;
}
/*.menu ul li a{ color: #fff; }
.menu ul li .menu-down a{ color: #000; }*/
.index-ban{ height: 100%; position: absolute; top: 0; left: 0; width: 100%; }
.index-ban .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 10px; }
.index-ban .swiper-pagination-bullet,.index-ban .swiper-pagination-switch{ width: 80px; height: 5px; border-radius: 0;background: rgb(255,255,255); opacity: 0.7; }
.index-ban .swiper-pagination-bullet.swiper-pagination-bullet-active,.index-ban .swiper-pagination-switch.swiper-active-switch{ background: #ff0000; opacity: 1; }
.index-ban .swiper-pagination{ bottom: 3%; }
.banner_title p span {
  font-weight: bold;
  font-size: 1.5em;
}

.xq_btn {
  padding: 0.8em 1em 1em;
  margin-top: 1.5em;
  border: 1px solid #b5b5b5;
  color: #000;
  font-size: 1.25rem;
  background: rgba(255, 255, 255, 0.8);
  width: auto;
  display: inline-block;
}



.xq_btn span.glyphicon {
  color: #e60012;
  font-size: 1.25em;
  margin-left: 0.8em;
  top: 3px;
}

.xq_btn:hover span.glyphicon {
  -moz-transform: translateX(5px);
  -ms-transform: translateX(5px);
  -webkit-transform: translateX(5px);
  transform: translateX(5px);
}


span.glyphicon {
  color: #e60012;
  font-size: 1.25em;
  margin-left: 0.8em;
  top: 1px;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

a:hover span.glyphicon {
  -moz-transform: translateX(5px);
  -ms-transform: translateX(5px);
  -webkit-transform: translateX(5px);
  transform: translateX(5px);
}

#home-city {
  background: #eeeeee;
}

.home-city {
  
  padding: 3% 0;
  position: relative;
}

.rn{ color: #b1b1b1; }
.rup{ color: #2ba72f; }
.rdown{ color: #2f6db4; }
.rn:before{ content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 2px; background: url(/cn/tres/WebUI/Deindex/images/2018/rn.png) no-repeat;  background-size: 100% 100%; }
.rup:before{ content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 2px; background: url(/cn/tres/WebUI/Deindex/images/2018/rup.png) no-repeat;  background-size: 100% 100%; }
.rdown:before{ content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 2px; background: url(/cn/tres/WebUI/Deindex/images/2018/rdown.png) no-repeat;  background-size: 100% 100%; }

.home-city .part-title {
  margin: 0 0 2em;
}

.home-city .city-develop {
  float: left;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 70%;
}

.home-city .city-develop .city-develop-data {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.home-city .city-develop .city-develop-nav {
  width: 25%;
}

.home-city .city-develop .city-develop-nav div {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-align-items: center;
  align-items: center;
  font-size: 1.25rem;
  background: #e2e4e5;
  padding: 0.8em;
  margin: 1px 0;
  cursor: pointer;
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li span:nth-child(2) {
  width: 5em;
  text-align: center;
  color: #4a4a4a;
}
.home-city .city-develop .city-develop-nav div .city-develop-nav-li:first-child + .city-develop-nav-li span:first-child + span{
  font-size: 1rem;
  width: 6.25em;
  padding: 0 0.2em;
  line-height: 1.5em;
}



.home-city .city-develop .city-develop-nav div .city-develop-nav-li .city-nav-icon {
  height: 2.1em;
  width: 2.8em;
  margin-left: 1em;
  background: url(/cn/tres/WebUI/Deindex/images/city_nav1.png) no-repeat;
  background-size: auto 100%;
  background-position: center;
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li:nth-child(2) .city-nav-icon {
  background-image: url(/cn/tres/WebUI/Deindex/images/city_nav2.png);
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li:nth-child(3) .city-nav-icon {
  background-image: url(/cn/tres/WebUI/Deindex/images/city_nav3.png);
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li:nth-child(4) .city-nav-icon {
  background-image: url(/cn/tres/WebUI/Deindex/images/city_nav4.png);
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li:nth-child(5) .city-nav-icon {
  background-image: url(/cn/tres/WebUI/Deindex/images/city_nav5.png);
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li.hover, .home-city .city-develop .city-develop-nav div .city-develop-nav-li.active {
  background: #e60012;
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li.hover span:nth-child(2), .home-city .city-develop .city-develop-nav div .city-develop-nav-li.active span:nth-child(2) {
  color: #fff;
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li.hover .city-nav-icon, .home-city .city-develop .city-develop-nav div .city-develop-nav-li.active .city-nav-icon {
  background-image: url(/cn/tres/WebUI/Deindex/images/city_nav1_active.png);
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li.hover:nth-child(2) .city-nav-icon, .home-city .city-develop .city-develop-nav div .city-develop-nav-li.active:nth-child(2) .city-nav-icon {
  background-image: url(/cn/tres/WebUI/Deindex/images/city_nav2_active.png);
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li.hover:nth-child(3) .city-nav-icon, .home-city .city-develop .city-develop-nav div .city-develop-nav-li.active:nth-child(3) .city-nav-icon {
  background-image: url(/cn/tres/WebUI/Deindex/images/city_nav3_active.png);
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li.hover:nth-child(4) .city-nav-icon, .home-city .city-develop .city-develop-nav div .city-develop-nav-li.active:nth-child(4) .city-nav-icon {
  background-image: url(/cn/tres/WebUI/Deindex/images/city_nav4_active.png);
}

.home-city .city-develop .city-develop-nav div .city-develop-nav-li.hover:nth-child(5) .city-nav-icon, .home-city .city-develop .city-develop-nav div .city-develop-nav-li.active:nth-child(5) .city-nav-icon {
  background-image: url(/cn/tres/WebUI/Deindex/images/city_nav5_active.png);
}

.home-city .city-develop .city-map {
  width: 65%;
  margin-right: 5%;
  /*margin-left: 5%;*/
}

.home-city .city-develop .city-map .map-line {
  display: -webkit-flex;
  display: flex;
}

.home-city .city-develop .city-map .map-line .map-line-li {
  width: 33.3%;
  font-size: 12px;
  color: #4a4a4a;
}

.home-city .city-develop .city-map .map-line .map-line-li img {
  margin: 0.5em 0;
  max-height: 5px;
  height: 5px;
}

.home-city .city-rank {
  width: 30%;
  background: #fff;
  padding: 3%;
  float: left;
  margin-top: 3.5em;
   border-top: 2px solid #e60021;
   font-size: 1.25rem;
}

.home-city .city-rank h3 {
  font-size: 1.75rem;
  margin-bottom: 0.5em;
}

.home-city .city-rank p {
  font-size: 1rem;
  margin-bottom: 1em;
  color: #666666;
}
.home-city .city-rank p span{
  color: #000;
}

.home-city .rank-info-box > ul {
  width: 100% !important;
  margin-bottom: 1.5em;
  text-align: center;
}

.home-city .city-rank .rank-li li span {
  float: left;
  text-align: center;
  width: 40%;
  font-size: 1rem;
  line-height: 30px;
  display: block;
}
.home-city .city-rank .rank-li li span +span{
  width: 60%;
}
.home-city .rank-info-box > ul > li{ width: 20% !important;  float: left;}
.home-city .rank-info-box > ul > li+li{ width: 80% !important;  float: left;}

.home-city .city-rank ul li span:before{
  content: "";
  width: 0.8em;
  height: 0.8em;
}

.home-city .city-rank .rank-info {
  width: 100%;
  padding: 0;
}

.home-city .city-rank .rank-enter {
  border-top: 1px solid #dadada;
  padding-top: 1.5em;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.home-city .city-rank .rank-enter .rank-btn {
  font-size: 1rem;
}

.home-city .city-rank .rank-enter .rank-btn a {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.home-city .city-rank .rank-enter .rank-btn a span {
  margin-left: 0.5em;
}

.item-case {
  padding: 0 0 30px;
}

.item-case .swiper-wrapper {
  -webkit-align-items: stretch;
  align-items: stretch;
}

.item-case .swiper-slide.pc-item {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  overflow: hidden;
}

.item-case .swiper-slide.pc-item img {
  width: auto !important;
  margin-left: -36%;
  height: 100%;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.item-case .swiper-slide.pc-item .slide-info {
  visibility: visible !important;
}

.item-case .swiper-slide.pc-item:first-child img {
  margin-left: 0;
}

.item-case .swiper-slide .slide-info {
  position: absolute;
  top: 15%;
  left: 15%;
  right: 15%;
  color: #fff;
  z-index: 3;
}

.item-case .swiper-slide .slide-info h3 {
  font-size: 1.75rem;
  margin-bottom: 1.5em;
  line-height: 1.5em;
  opacity: 1 !important;
}

.item-case .swiper-slide .slide-info p {
  font-size: 1.25rem;
  line-height: 1.5em;
  color: #fff;
}

.item-case .swiper-slide .slide-info .slide-btn {
  margin-top: 1.75em;
  display: inline-block;
  font-size: 1.25rem;
  background: url(/cn/tres/WebUI/Deindex/images/slide_btn.jpg);
  background-size: 100% 100%;
  padding: 0.8em 1.5em;
  margin-top: 1.5em;
  color: #fff;
}

.item-case .swiper-slide .slide-info.shrink h3 {
  font-size: 1.25rem;
  line-height: 1.6em;
}

.item-case .swiper-slide .slide-info.shrink p {
  opacity: 0 !important;
}

.item-case .swiper-slide .slide-info.shrink a {
  opacity: 0 !important;
}

.graph {
  padding: 0 0 80px;
  text-align: center;
}

.graph .graph-box {
  position: relative;
}

.graph .graph-box .scolltips {
  width: 120px;
  position: absolute;
  left: 50%;
  top: 70px;
  margin-left: -60px;
  z-index: 9;
}

.graph #graph-img > div {
  /*background: url(/cn/tres/WebUI/Deindex/images/gdp-bg.gif) no-repeat;*/
  background-position: 50% 49%;
  background-size: 83.5% 78%;
}

.graph #graph-img > div + div {
  background: none !important;
}

.graph h2 {
  font-size: 2.25rem;
  margin: 1em 0;
}

.graph p {
  font-size: 1.25rem;
  line-height: 1.5em;
  margin-bottom: 2em;
  width: 70%;
  margin: 0 auto;
}

.graph .map-line {
  width: 80%;
  width: calc(100% - 200px);
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
}

.graph .map-line .map-line-li {
  width: 33.3%;
  font-size: 10px;
  color: #4a4a4a;
}

.graph .map-line .map-line-li:first-child{
  width: 50%;
}
.graph .map-line .map-line-li:first-child + .map-line-li {
  width: 33.333333%;
}
.graph .map-line .map-line-li:first-child + .map-line-li + .map-line-li {
  width: 16.66666%;
}




.graph .map-line .map-line-li img {
  width: 1px;
  margin: 0.5em 0;
  height: 5px;
}

.map-line-li img {
  display: block;
  width: 1px;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

.expert {
  background: url(/cn/tres/WebUI/Deindex/images/expert.jpg);
  background-size: 100% 100%;
  padding: 35px 0;
}

.expert .container {
  padding: 0;
  position: relative;
}

.expert .part-title {
  color: #fff;
  margin-bottom: 1em;
}

.expert .swiper-slide {
  visibility: hidden !important;
  z-index: 5;
  width: 100%;
}

.expert .swiper-slide-pp, .expert .swiper-slide-nn {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
  visibility: visible !important;
  z-index: 6;
}

.expert .swiper-slide-prev, .expert .swiper-slide-next {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  visibility: visible !important;
  z-index: 7;
}

.expert .swiper-slide-active {
  visibility: visible !important;
  z-index: 8;
}

.expert .expert-btn {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.expert .expert-btn .xq_btn {
  padding: 5px 10px 8px;
  width: auto;
  display: inline-block;
}

.expert .expert-btn .xq_btn span {
  margin-left: 0.4em;
}

.expert-swiper-row {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  background: url(/cn/tres/WebUI/Deindex/images/expert/expert_swiper_bg.jpg);
  background-size: 100% 100%;
}

.expert-swiper-row .expert-swiper-row-img {
  float: left;
  width: 52%;
}

.expert-swiper-row .expert-swiper-row-img img {
  vertical-align: middle;
}

.expert-swiper-row .expert-swiper-row-info {
  float: left;
  width: 48%;
  padding: 5%;
}

.expert-swiper-row .expert-swiper-row-info h3 {
  font-size: 2.5rem;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #e60012;
  margin-bottom: 1em;
  display: inline-block;
  color: #000;
}

.expert-swiper-row .expert-swiper-row-info p {
  font-size: 1.5rem;
  color: #000;
}

.milestone {
  padding: 50px 0 0;
}

.milestone .milestone-row {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.milestone .milestone-row .milestone-item {
  position: relative;
  width: 49%;
}

.milestone .milestone-row .milestone-item .zhezhao {
  top: 50%;
  -moz-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

.milestone .milestone-row a {
  color: #fff;
}

.milestone .milestone-row .milestone-info {
  position: absolute;
  bottom: 1em;
  color: #fff;
  padding: 0 2em;
  z-index: 5;
}

.milestone .milestone-row .milestone-info h3 {
  font-size: 2rem;
  margin-bottom: 0.5em;
  font-weight: bold;
}

.milestone .milestone-row .milestone-info h4 {
  font-size: 1.5rem;
  margin-bottom: 0.2em;
}

.milestone .milestone-row .milestone-info p {
  font-size: 1rem;
  color: #fff;
}

.milestone .milestone-btn {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.milestone .milestone-btn .xq_btn {
  padding: 5px 10px 8px;
  width: auto;
  display: inline-block;
}

.milestone .milestone-btn .xq_btn span {
  margin-left: 0.4em;
}

.media-report {
  padding: 50px 0;
}

.media-report .media-row {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.media-report .media-row .media-item {
  position: relative;
  width: 32%;
  background: #f0ebe3;
  padding: 2rem 2rem 5rem;
}

.media-report .media-row .media-item h3 {
  font-size: 1.75rem;
  margin-bottom: 0.5em;
  line-height: 1.5em;
}

.media-report .media-row .media-item h3 a {
  display: block;
  position: static;
  font-size: 1.75rem;
}

.media-report .media-row .media-item p {
  font-size: 1rem;
  color: #666666;
}

.media-report .media-row .media-item a {
  display: block;
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  font-size: 1rem;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

.media-report .media-row .media-item a span {
  margin-left: 0.3em;
}

.media-report .media-btn {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.media-report .media-btn .xq_btn {
  padding: 5px 10px 8px;
  width: auto;
  display: inline-block;
}

.media-report .media-btn .xq_btn span {
  margin-left: 0.4em;
}

.observe {
  background: url(/cn/tres/WebUI/Deindex/images/observe/index_bg.jpg) center bottom no-repeat #8a98aa;
  background-size: 100% 100%;
}

.observe .container {
  padding: 35px 0;
}

.observe .observe-index {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}

.observe .observe-index .observe-info {
  width: 39%;
  float: left;
}

.observe .observe-index .observe-info .observe-title {
  font-size: 2.25rem;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  border-bottom: 2px solid #e60012;
  padding-bottom: 0.5em;
}

.observe .observe-index .observe-info .observe-content {
  color: #fff;
  font-size: 1.75rem;
  margin-top: 1em;
  margin-bottom: 2em;
  line-height: 1.5em;
}

.observe .observe-index .observe-info .slide-btn {
  display: inline-block;
  font-size: 1.25rem;
  background: url(/cn/tres/WebUI/Deindex/images/slide_btn.jpg);
  background-size: 100% 100%;
  padding: 0.8em 1.5em;
  color: #fff;
}

.observe .observe-index .observe-img {
  width: 50%;
  float: right;
  position: relative;
}

.observe .observe-index .observe-img .observe-img-info {
  position: absolute;
  left: 0;
  bottom: 0;
  widows: 100%;
  background: url(/cn/tres/WebUI/Deindex/images/observe/observe_img_info_bg.png) repeat;
  padding: 30px;
}

.observe .observe-index .observe-img .observe-img-info h3 {
  font-size: 1.75rem;
  color: #000;
  margin-bottom: 0.5em;
  line-height: 1.5em;
}

.observe .observe-index .observe-img .observe-img-info p {
  color: #4a4a4a;
  line-height: 1.5em;
  font-size: 1.25rem;
  margin: 0;
}

h3 {
  font-size: 2rem;
}

.slide-prev, .slide-next {
  position: absolute;
  width: 39px;
  height: 73px;
  top: 50%;
  margin-top: -37px;
  z-index: 9;
}

.slide-prev {
  left: 15px;
}

.slide-next {
  right: 15px;
}

.zhezhao {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}

.clickTap {
  position: absolute;
  width: 222px;
  height: 152px;
  right: -25px;
  bottom: 13px;
  text-align: left;
}

.gdptype{ text-align: center; margin: 15px auto; width: 20em; font-size: 1.25rem; display: none; }
.gdptype-item {float: left;  cursor: pointer;  line-height: 2.5em; width: 10em;font-weight: bold; font-size: 1.25rem; background: #f4f4f4; text-align: center;border: 1px solid #b5b5b5; color: #4a4a4a; margin: 0;  }
.gdptype-item+.gdptype-item{ border-left: 0; }
.gdptype-item.active{ background: #fff; color: #000;  }
.gdptype-item:hover{ background: #fff; color: #000; }
.gdptype-item:before{ content: ""; margin-right: 0.5em; position: relative; top: 2px; display: inline-block; height: 19px; width: 23px; background: url(/cn/tres/WebUI/Deindex/images/2018/gdptype.png); background-size: 100% 100%; }
.gdptype-item.active:before{  background-image: url(/cn/tres/WebUI/Deindex/images/2018/gdptype_n.png); }
.gdp-info{ display: none; }
.gdp-info p{ display: none; }
.gdp-info p.active{ display: block; }

.gdp-city{ text-align: center; margin: 20px 0 10px; }
.gdp-city-item{ line-height: 1em; font-size: 1.25rem; color: #4a4a4a;  display: inline-block; padding: 0.5em 0.8em; margin: 5px; border: 1px solid #b5b5b5; background: #fff; cursor: pointer; }
.gdp-city-item.active{ background: #e10101; color: #fff; }
.gdp-city-item:hover{ background: #e10101; color: #fff; }

.map-tab{border: 1px solid #d5d5d5; background: #f6f6f6; margin: 10px 0; }
.map-tab-li{ float: left; width: 27%; color: #4a4a4a; border-left: 1px solid #d5d5d5; text-align: center; line-height: 2.5em; font-size: 1rem; cursor: pointer; }
.map-tab-li:first-child{  width: 19%; border-left: 0; }
.map-tab-li.active{ color: #000; background: #fff; }

.map-tab-li:before{ content: ""; width: 10px; height: 10px; position: relative; display: inline-block; margin-right: 5px; border-radius: 50%; background: #fff; border: 2px solid #adadad; }

.map-tab-li:first-child + .map-tab-li:before{ border-color: #ffd246; }
.map-tab-li:first-child + .map-tab-li + .map-tab-li:before{ border-color: #ff7a21; }
.map-tab-li:first-child + .map-tab-li + .map-tab-li+  .map-tab-li:before{ border-color: #e80014; }

.map-tab-li.active:before{ background: #adadad;  }
.map-tab-li:first-child + .map-tab-li.active:before{ background: #ffd246; }
.map-tab-li:first-child + .map-tab-li + .map-tab-li.active:before{ background: #ff7a21; }
.map-tab-li:first-child + .map-tab-li + .map-tab-li + .map-tab-li.active:before{ background: #e80014; }



.chartsbox{ position: relative; }
.quadrant{ position: absolute;  z-index: 8; }
.diamonds{ position: absolute; right: 110px; bottom: 60px; width: 30px; z-index: 99; }
.qr1{ left: 100px; top:50px; background: #ededed;}
.qr2{ right: 100px; bottom: 50px;  background: #f9f2e5; }
#graph-img{ z-index: 9; }
.gdp-city .bz{ font-size: 1.25rem; margin: 10px 0 0; text-align: center; width: 100%; }
.gdp-city .bz:before{ position: relative; margin-right: 8px; }



.banner_title .xq_btn{ margin-top: 0; }

.download-bps{ position: absolute; font-size: 1.25rem; line-height: 1.25em; right: 0; width: 30%; font-weight: bold;}
.download-bps span{ float: left; width: 2em; margin-right: 0.5em; margin-top: 0.25em; }
.download-bps span+span{ width: 80%; margin-top: 0; }


@media (max-width: 768px) {
  .diamonds{ right: 105px; bottom: 55px; width: 25px; }
  .download-bps{ width: 100%; background: #fff; font-size: 1.75rem; padding: 10px 15px;  top: 15px; }
  .home-city .city-rank .rank-li li span {
    font-size: 1.25rem;
    line-height: 40px;
  }
  .home-city .city-rank .rank-top10 td{ line-height: auto }
  .gdptype-item{ line-height: 3em; }
/*  .menu .mb-menu{ background-image: url(/cn/tres/WebUI/Deindex/images/2018/m_menu.png); }
  .menu ul li a{ color: #000; }*/
  .expert-swiper-row {
    background-image: url(/cn/tres/WebUI/Deindex/images/expert/expert_swiper_bg.jpg);
    background-size: 100% 100%;
  }
  .banner .title-img{ width: 76%; }

  .banner .xq_btn{ margin-top: 0.5em; font-size: 1.25rem; margin-left: 5px; }
  .banner .title-img img{ margin-left: -2%;  }

  .expert-swiper-row .expert-swiper-row-img {
    float: left;
    width: 52%;
  }

  .expert-swiper-row .expert-swiper-row-img img {
    vertical-align: middle;
  }

  .expert-swiper-row .expert-swiper-row-info {
    float: left;
    width: 48%;
    padding: 5%;
  }

  .expert-swiper-row .expert-swiper-row-info h3 {
    font-size: 2rem;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #e60012;
    margin-bottom: 1em;
    display: inline-block;
    color: #000;
  }

  .expert-swiper-row .expert-swiper-row-info p {
    font-size: 1.25rem;
    color: #000;
  }

  .banner .container {
    padding: 8% 10px 0;
  }

  .banner .container .banner_title {
    padding-left: 0;
    width: 100%;
  }

  .banner .container .banner_title h2 {
    line-height: 1.25em;
    font-size: 3rem;
  }

  .banner .container .banner_title p {
    display: none;
    text-align: center;
  }

  #home-city {
    padding: 0 15px;
  }

  .home-city {
    -webkit-flex-direction: column;
    flex-direction: column;
    font-size: 1.75rem;
    padding-top: 4.7em;
    padding-bottom: 0;
  }

  .home-city .part-title {
    margin: 0.5em 0 1em;
    font-size: 2rem;
    font-weight: bold;
  }

  .home-city .city-develop {
    width: 100%;
  }

  .home-city .city-develop .city-develop-data {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .home-city .city-develop .city-develop-nav {
    width: 100%;
  }

  .home-city .city-develop .city-develop-nav div {
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
  }

  .home-city .city-develop .city-develop-nav div .city-develop-nav-li {
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 19.5%;
    padding: 0.8em 0;
  }

  .home-city .city-develop .city-develop-nav div .city-develop-nav-li span:nth-child(2) {
    width: 100%;
    font-size: 1rem;
    line-height: 3em;
  }
  .home-city .city-develop .city-develop-nav div .city-develop-nav-li:first-child + .city-develop-nav-li span:first-child + span{
    line-height: 1.5em;
  }

  .home-city .city-develop .city-develop-nav div .city-develop-nav-li .city-nav-icon {
    margin-bottom: 5px;
    margin-left: 0;
  }

  .home-city .city-develop .city-map {
    width: 100%;
    margin-top: 0.5em;
    margin-right: 0%;
    margin-bottom: 30px;
  }

  .home-city .city-rank {
    margin: 0 -15px;
    width: calc(100% + 30px);
    padding: 8% 15px;

  }

  .home-city .city-rank h3 {
    font-size: 1.75rem;
    margin-bottom: 0;
  }

  .home-city .city-rank h3 span {
    font-size: 1.85rem;
    font-weight: bold;
  }

  .home-city .city-rank p {
    display: none;
  }

  .home-city .city-rank .rank-info {
    /*padding: 24px 0;*/
    /*margin-bottom: 25px;*/
  }
  .home-city .city-rank table{ margin-top: 20px; }

  .home-city .city-rank .rank-enter .rank-btn a {
    font-size: 1.5rem;
  }

  .item-case .swiper-slide .slide-info {
    top: 20%;
  }

  .item-case .swiper-slide .slide-info .slide-btn {
    margin-top: 0em;
    font-size: 1.25rem;
    width: 8em;
    display: block;
    margin: 0 auto;
    margin-top: 1.5em;
    text-align: center;
    opacity: 1 !important;
  }

  .item-case .swiper-slide .slide-info.shrink h3 {
    font-size: 2rem;
    margin-bottom: 0em;
    line-height: 1.25em;
    text-align: center;
    margin: 0 auto;
  }

  .item-case .swiper-slide .slide-info.shrink p {
    display: none;
  }

  .item-case .swiper-slide .slide-info.shrink .slide-btn {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1 !important;
  }

  .graph {
    padding: 0 15px 25px;
  }

  .graph h2 {
    font-size: 2rem;
    margin: 1em 0 0.6em;
  }

  .graph p {
    color: #666666;
  }

  .slide-prev, .slide-next {
    height: 60%;
    top: 20%;
    margin-top: 0;
    width: 10%;
  }

  .slide-prev img, .slide-next img {
    width: 20px;
    height: 37px;
    top: 50%;
    margin-top: -18px;
    position: absolute;
  }

  .slide-next img {
    right: 0;
  }

  .slide-prev img {
    left: 0;
  }

  .expert {
    background: url(/cn/tres/WebUI/Deindex/images/expert.jpg);
    background-size: 100% 100%;
    padding: 35px 0;
  }

  .expert .container {
    padding: 0 15px;
  }

  .expert .expert-slide {
    margin: 0 -15px;
  }

  .expert .swiper-slide {
    width: 70%;
  }

  .milestone {
    padding: 20px 15px 0;
  }

  .milestone .milestone-row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .milestone .milestone-row .milestone-item {
    width: 100%;
    margin-bottom: 10px;
  }

  .milestone .milestone-btn .xq_btn {
    margin-top: 0.5em;
  }

  .media-report {
    padding: 20px 15px;
  }

  .media-report .media-row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .media-report .media-row .media-item {
    width: 100%;
    margin-bottom: 20px;
    padding: 1rem 1.5rem;
  }

  .media-report .media-row .media-item a {
    display: none;
  }

  .media-report .media-btn .xq_btn {
    margin-top: 0.5em;
  }

  .observe {
    background: url(/cn/tres/WebUI/Deindex/images/observe/index_bg_m.jpg) center bottom no-repeat;
    background-size: 100% 100%;
  }

  .observe .container {
    padding: 0 15px;
  }

  .observe .observe-index {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .observe .observe-index .observe-info {
    width: 100%;
    margin-bottom: 30px;
  }

  .observe .observe-index .observe-info .observe-title {
    font-size: 2.25rem;
    font-weight: normal;
    margin-bottom: 1em;
    margin-top: 1.5em;
    display: block;
    text-align: center;
    border-bottom: 0;
    padding-bottom: 0;
  }

  .observe .observe-index .observe-info .observe-content {
    display: none;
  }

  .observe .observe-index .observe-info .slide-btn {
    font-size: 1.5rem;
    padding: 0.5em 0;
    width: 5.6em;
    margin: 0 auto;
    text-align: center;
    display: block;
  }

  .observe .observe-index .observe-img {
    width: 100%;
  }

  .observe .observe-index .observe-img .observe-img-info {
    display: none;
  }
}

@media (max-width: 767px) {

  .graph-img {
    overflow-x: scroll;
    height: 400px;
    padding-top: 50px;
    margin-top: -50px;
    width: 100%;
    padding-left: 30px;
  }

  .graph-img .map-line {
    margin-left: 100px;
  }

  .graph-img #graph-img > div {
    background-size: 71.5% 63%;
  }


  .clickTap {
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    right: -38px;
    bottom: -3px;
  }

  #graph-img,.chartsbox{
    width: 700px;
  }
}

@media (max-width: 400px) {
  .banner .container .banner_title h2 {
    font-size: 2.5rem;
  }

  h3, .milestone .milestone-row .milestone-info h3, .media-report .media-row .media-item h3, .part-title, .home-city .part-title, .item-case .swiper-slide .slide-info.shrink h3 {
    font-size: 1.75rem;
  }

  .item-case .swiper-slide .slide-info.shrink h3 {
    width: 11em;
  }

  .graph p {
    width: 95%;
  }
}

@media (max-width: 1200px) {
  .graph #graph-img > div {
    background-size: 79.5% 72%;
  }
}

@media (max-width: 992px) {
  .graph #graph-img > div {
    background-size: 73.5% 65%;
  }
}