/*
 * Swiper 2.7.6
 * Mobile touch slider and framework with hardware accelerated transitions
 *
 * http://www.idangero.us/sliders/swiper/
 *
 * Copyright 2010-2015, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 *
 * Licensed under GPL & MIT
 *
 * Released on: February 11, 2015
*/
/* ===============================================================
Basic Swiper Styles 
================================================================*/
.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  direction: ltr;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Fix of Webkit flickering */
  z-index: 1; }

.swiper-wrapper {
  position: relative;
  width: 100%;
  -webkit-transition-property: -webkit-transform, left, top;
  -webkit-transition-duration: 0s;
  -webkit-transform: translate3d(0px, 0, 0);
  -webkit-transition-timing-function: ease;
  -moz-transition-property: -moz-transform, left, top;
  -moz-transition-duration: 0s;
  -moz-transform: translate3d(0px, 0, 0);
  -moz-transition-timing-function: ease;
  -o-transition-property: -o-transform, left, top;
  -o-transition-duration: 0s;
  -o-transform: translate3d(0px, 0, 0);
  -o-transition-timing-function: ease;
  -o-transform: translate(0px, 0px);
  -ms-transition-property: -ms-transform, left, top;
  -ms-transition-duration: 0s;
  -ms-transform: translate3d(0px, 0, 0);
  -ms-transition-timing-function: ease;
  transition-property: transform, left, top;
  transition-duration: 0s;
  transform: translate3d(0px, 0, 0);
  transition-timing-function: ease;
  box-sizing: content-box; }

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto; }

.swiper-slide {
  float: left;
  box-sizing: content-box; }

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
  -ms-touch-action: pan-y; }

.swiper-wp8-vertical {
  -ms-touch-action: pan-x; }

/* ===============================================================
Your custom styles, here you need to specify container's and slide's
sizes, pagination, etc.
================================================================*/
.swiper-container {
  /* Specify Swiper's Size: */
  /*width:200px;
	height: 100px;*/ }

.swiper-slide {
  /* Specify Slides's Size: */
  /*width: 100%;
	height: 100%;*/ }

.swiper-slide-active {
  /* Specific active slide styling: */ }

.swiper-slide-visible {
  /* Specific visible slide styling: */ }

/* ===============================================================
Pagination Styles
================================================================*/
.swiper-pagination-switch {
  /* Stylize pagination button: */ }

.swiper-active-switch {
  /* Specific active button style: */ }

.swiper-visible-switch {
  /* Specific visible button style: */ }
@charset "UTF-8";
html, body {
  width: 100%;
  height: 100%; }

body {
  width: 100%;
  height: 100%;
  position: relative; }

.main {
  width: 1358px;
  height: 100%;
  margin: auto; }

.swiper-container {
  width: 100%;
  height: 100%; }

.top {
  width: 100%;
  height: 100vh;
  background: url(/img/banner-bg.jpg?152ce9bf) no-repeat center center;
  background-size: cover;
  overflow: hidden;
  position: relative; }
  .top .nav-wrap {
    height: 90px;
    background: rgba(0, 0, 0, 0.67);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11; }
    .top .nav-wrap .logo {
      width: auto;
      height: 54px;
      float: left;
      margin: 18px 0; }
    .top .nav-wrap .nav-list {
      float: right;
      margin: 20px 0; }
      .top .nav-wrap .nav-list .nav-item {
        float: left;
        font-size: 14px;
        color: #fff;
        text-align: center;
        padding: 15px 25px; }
        .top .nav-wrap .nav-list .nav-item.active {
          border-bottom: 2px solid #fff; }
  .top .video-item {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0;
}
    .top .video-item.active {
      opacity: 1; }
  .top .slide-dots {
    width: 510px;
    position: absolute;
    height: 3px;
    bottom: 20px;
    left: 50%;
    margin-left: -240px; }
    .top .slide-dots .slide-dot {
      cursor: pointer;
      width: 150px;
      height: 3px;
      background-color: #313131;
      margin: 0 10px;
      float: left; }
      .top .slide-dots .slide-dot.active {
        background-color: #a0a0a0; }
  .top .text {
    width: 472px;
    height: auto;
    position: absolute;
    z-index: 10;
    left: 50%;
    margin-left: -236px;
    top: 50%;
    margin-top: -63px; }
  .top .about-btn {
    width: 170px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #fff;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    position: absolute;
    left: 50%;
    margin-left: -85px;
    bottom: 85px;
    z-index: 10; }

.busin-wrap {
  width: 100%;
  height: 1000px;
  background: #000 url(/img/busin-bg.jpg?53e7b9b4) no-repeat center center; }
  .busin-wrap .title {
    padding: 62px 0 0 0;
    opacity: 0; }
  .busin-wrap .title-left {
    width: 40%;
    height: 120px;
    line-height: 120px;
    border-bottom: 1px solid #fff;
    float: left; }
  .busin-wrap .title-text {
    width: 14%;
    margin: 0 3%;
    font-size: 36px;
    font-weight: normal;
    color: #fff;
    height: 120px;
    line-height: 120px;
    border-bottom: 1px solid #fff;
    float: left;
    text-align: center; }
  .busin-wrap .title-right {
    width: 40%;
    border-bottom: 1px solid #fff;
    height: 120px;
    line-height: 120px;
    float: left; }
  .busin-wrap .desc {
    margin: 46px auto 0 auto;
    text-align: center;
    font-size: 16px;
    color: rgba(255, 255, 255, .8);
    line-height: 24px;
    /* font-family: '\9ED1\4F53'; */
    opacity: 0; }
  .busin-wrap .pic {
    margin: 65px auto 0 auto;
    height: 516px;
    opacity: 0; }
    .busin-wrap .pic .item {
      width: 33.33%;
      height: 516px;
      overflow: hidden;
      position: relative;
      float: left;
      transiTion: all 1s; }
      .busin-wrap .pic .item:hover .icon {
        Animation: flipInY 1s .2s both; }
      .busin-wrap .pic .item:hover .line {
        display: none; }
      .busin-wrap .pic .item:hover .name {
        top: 210px; }
      .busin-wrap .pic .item:hover .bgc {
        background-color: rgba(102, 102, 102, 0.6); }
      .busin-wrap .pic .item:hover .desc {
        top: 210px; }
      .busin-wrap .pic .item:hover .btn {
        top: 320px;
        visibility: visible; }
      .busin-wrap .pic .item .bgc {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: background-color 1s; }
      .busin-wrap .pic .item .line {
        width: 20px;
        height: 2px;
        background-color: #fff;
        position: absolute;
        left: 50%;
        margin-left: -10px;
        top: 228px; }
      .busin-wrap .pic .item .name {
        text-align: center;
        color: #fff;
        font-size: 24px;
        position: absolute;
        top: 270px;
        width: 100%;
        left: 0;
        transition: top .5s; }
      .busin-wrap .pic .item .desc {
        text-align: center;
        color: rgba(255, 255, 255, .8);
        font-size: 12px;
        position: absolute;
        width: 100%;
        left: 0;
        top: 290px;
        transition: top .5s; }
      .busin-wrap .pic .item .btn {
        width: 122px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #fff;
        font-size: 12px;
        color: #fff;
        position: absolute;
        left: 50%;
        margin-left: -61px;
        top: 380px;
        transition: top .5s;
        visibility: hidden; }
      .busin-wrap .pic .item .icon1 {
        width: 50px;
        height: auto;
        position: absolute;
        left: 50%;
        margin-left: -25px;
        top: 135px; }
      .busin-wrap .pic .item .icon2 {
        width: 76px;
        height: auto;
        position: absolute;
        left: 50%;
        margin-left: -38px;
        top: 146px; }
      .busin-wrap .pic .item .icon3 {
        width: 50px;
        height: auto;
        position: absolute;
        left: 50%;
        margin-left: -25px;
        top: 135px; }
      .busin-wrap .pic .item .icon4 {
        width: 40px;
        height: auto;
        position: absolute;
        left: 50%;
        margin-left: -20px;
        top: 142px; }
    .busin-wrap .pic .item1 {
      background: url(/img/busin1.jpg?36174f39) no-repeat center center;
      background-size: cover; }
    .busin-wrap .pic .item2 {
      background: url(/img/busin2.jpg?bbd5f2d8) no-repeat center center;
      background-size: cover; }
    .busin-wrap .pic .item3 {
      background: url(/img/busin3.jpg?b7b2c29b) no-repeat center center;
      background-size: cover; }
    .busin-wrap .pic .item4 {
      background: url(/img/busin4.jpg?2820be34) no-repeat center center;
      background-size: cover; }
  .busin-wrap.active .title {
    Animation: fadeInUp 1s ease both; }
  .busin-wrap.active .desc {
    Animation: fadeInUp 1s .2s ease both; }
  .busin-wrap.active .pic {
    Animation: fadeInUp 1s .4s ease both; }

.brand-wrap {
  width: 100%;
  height: 1080px;
  background: url(/img/branch-bg.jpg?4f262ba4) no-repeat center center; }
  .brand-wrap .car-wrap {
    padding: 60px 0 30px 0; }
  .brand-wrap .slide-wrap {
    width: 100%;
    height: 522px;
    box-sizing: border-box;
    border: 1px solid #000;
    position: relative; }
    .brand-wrap .slide-wrap .brand-num {
      width: 230px;
      height: 390px;
      background-color: #fff;
      position: absolute;
      top: 0;
      padding: 0 5px;
      left: -5px;
      top: 66px;
      line-height: 390px;
      text-align: center; }
      .brand-wrap .slide-wrap .brand-num img {
        display: inline-block;
        width: 230px;
        height: auto;
        vertical-align: middle; }
    .brand-wrap .slide-wrap .car-slide {
      width: 1040px;
      height: 390px;
      background-color: #fff;
      padding: 0 5px;
      position: absolute;
      top: 66px;
      right: -5px;
      text-align: center; }
      .brand-wrap .slide-wrap .car-slide img {
        /* width: auto; */
        /* height: 390px;  */
        width: 750px;
        height: auto;
      }
      .brand-wrap .slide-wrap .car-slide .car-slide-prev {
        cursor: pointer;
        width: 24px;
        height: 42px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -21px;
        z-index: 10;
        background: url(/img/brand-swiper-left.png?cf840fe8) no-repeat center center; }
      .brand-wrap .slide-wrap .car-slide .car-slide-next {
        cursor: pointer;
        width: 24px;
        height: 42px;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -21px;
        z-index: 10;
        background: url(/img/brand-swiper-right.png?67e36149) no-repeat center center; }
  .brand-wrap .branch-dots {
    width: 100%; }
    .brand-wrap .branch-dots .branch-item {
      position: relative;
      width: 194px;
      height: 160px;
      line-height: 160px;
      text-align: center;
      float: left;
      box-sizing: border-box;
      cursor: pointer; }
    .brand-wrap .branch-dots .branch-item:hover img{
      display: none;
    }
    .brand-wrap .branch-dots .branch-item a:hover {
      border: 1px solid #d3ad6f;
      color: #d3ad6f;
    }
    .brand-wrap .branch-dots .branch-item a {
      display: inline-block;
      width: 122px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #000;
      font-size: 12px;
      color: #000;
      opacity: 0;
      visibility: hidden;
      transition: opacity .5s;
      display: none;
    }
    .brand-wrap .branch-dots .branch-item:hover a {
      visibility: visible;
      opacity: 1;
      display: inline-block;
    }
      .brand-wrap .branch-dots .branch-item.border-right {
        border-right: 1px solid #e4e4e4; }
      .brand-wrap .branch-dots .branch-item.border-top {
        border-top: 1px solid #e4e4e4; }
      .brand-wrap .branch-dots .branch-item.border-bottom {
        border-bottom: 1px solid #e4e4e4; }
      .brand-wrap .branch-dots .branch-item.active {
        background-color: #e4e4e4; }
      .brand-wrap .branch-dots .branch-item img {
        vertical-align: middle; }

.news-wrap {
  background: url(/img/news-bg.jpg?3d1d9560) no-repeat center center;
  width: 100%;
  height: 850px; }
  .news-wrap .title {
    padding: 100px 0 0 0;
    opacity: 0; }
  .news-wrap .title-left {
    width: 33%;
    height: 120px;
    line-height: 120px;
    border-bottom: 1px solid #fff;
    float: left; }
  .news-wrap .title-text {
    width: 28%;
    margin: 0 3%;
    font-size: 36px;
    font-weight: normal;
    color: #fff;
    height: 120px;
    line-height: 120px;
    border-bottom: 1px solid #fff;
    float: left;
    text-align: center; }
  .news-wrap .title-right {
    width: 33%;
    border-bottom: 1px solid #fff;
    height: 120px;
    line-height: 120px;
    float: left; }
  .news-wrap .news-list {
    margin: 80px 0 0 0;
    opacity: 0; }
    .news-wrap .news-list .new-item {
      cursor: pointer;
      float: left;
      width: 50%; }
      .news-wrap .news-list .new-item .left {
        position: relative;
        width: 302px;
        height: 170px;
        overflow: hidden;
        float: left;
        text-align: center;
        margin: 0 20px; }
        .news-wrap .news-list .new-item .left img {
          position: absolute;
          left: 50%;
          top: 0;
          transform: translateX(-50%);
          width: auto;
          height: 170px; }
      .news-wrap .news-list .new-item .right {
        margin-left: 342px;
        margin-right: 20px; }
        .news-wrap .news-list .new-item .right .new-title {
          padding: 15px 0px;
          border-bottom: 1px solid #fff;
          font-weight: bold;
          color: #fff;
          font-size: 22px;
          white-space : nowrap;
          text-overflow : ellipsis;
          overflow : hidden; }
        .news-wrap .news-list .new-item .right .desc {
          margin-top: 20px;
          font-size: 14px;
          color: rgba(255, 255, 255, .8);
          line-height: 30px; }
  .news-wrap .action {
    width: 770px;
    margin: 85px auto 0 auto;
  }
  .news-wrap .detail-btn {
    float: left;
    width: 170px;
    height: 40px;
    text-align: center;
    border-radius: 20px;
    color: #fff;
    border: 1px solid #fff;
    line-height: 40px;
    margin: 0 10px;
    /* margin: 85px auto 0 auto; */
    opacity: 0; }
  .news-wrap.active .title {
    Animation: fadeInUp 1s ease both; }
  .news-wrap.active .news-list {
    Animation: fadeInUp 1s .2s ease both; }
  .news-wrap.active .detail-btn {
    Animation: fadeInUp 1s .4s ease both; }

.invest-wrap {
  background-color: #f1f1f1;
  height: 680px; }
  .invest-wrap .title {
    padding: 100px 0 0 0;
    opacity: 0; }
  .invest-wrap .title-left {
    width: 40%;
    height: 120px;
    line-height: 120px;
    border-bottom: 1px solid #000;
    float: left; }
  .invest-wrap .title-text {
    width: 14%;
    margin: 0 3%;
    font-size: 36px;
    font-weight: normal;
    color: #000;
    height: 120px;
    line-height: 120px;
    border-bottom: 1px solid #000;
    float: left;
    text-align: center; }
  .invest-wrap .title-right {
    width: 40%;
    border-bottom: 1px solid #000;
    height: 120px;
    line-height: 120px;
    float: left; }
  .invest-wrap .invest-list {
    width: 1407px;
    margin-top: 90px;
    opacity: 0; }
    .invest-wrap .invest-list .invest-item {
      width: 155px;
      height: 240px;
      float: left;
      margin-right: 46px;
      text-align: center;
      cursor: pointer; }
      .invest-wrap .invest-list .invest-item .icon {
        width: 154px;
        height: 154px;
        display: block;
        margin-bottom: 55px; }
      .invest-wrap .invest-list .invest-item .text {
        font-size: 14px;
        color: #000; }
      .invest-wrap .invest-list .invest-item .icon1 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -184px -10px; }
      .invest-wrap .invest-list .invest-item .icon2 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -184px -358px; }
      .invest-wrap .invest-list .invest-item .icon3 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -10px -184px; }
      .invest-wrap .invest-list .invest-item .icon4 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -184px -184px; }
      .invest-wrap .invest-list .invest-item .icon5 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -358px -10px; }
      .invest-wrap .invest-list .invest-item .icon6 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -358px -184px; }
      .invest-wrap .invest-list .invest-item .icon7 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -10px -358px; }
      .invest-wrap .invest-list .invest-item:hover .text {
        color: #d3ad6f; }
      .invest-wrap .invest-list .invest-item:hover .icon1 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -10px -10px; }
      .invest-wrap .invest-list .invest-item:hover .icon2 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -358px -358px; }
      .invest-wrap .invest-list .invest-item:hover .icon3 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -532px -10px; }
      .invest-wrap .invest-list .invest-item:hover .icon4 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -532px -184px; }
      .invest-wrap .invest-list .invest-item:hover .icon5 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -532px -358px; }
      .invest-wrap .invest-list .invest-item:hover .icon6 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -10px -532px; }
      .invest-wrap .invest-list .invest-item:hover .icon7 {
        background: url(/img/invest-icon-sprites.png?f1e8663b) no-repeat -184px -532px; }
  .invest-wrap.active .title {
    Animation: fadeInUp 1s ease both; }
  .invest-wrap.active .invest-list {
    Animation: fadeInUp 1s .2s ease both; }

.index-bottom-top {
  background-color: #f1f1f1; }
  .index-bottom-top img {
    width: 100%;
    height: auto;
    display: block; }

@keyframes flipInY {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 1; }
  40% {
    transform: perspective(400px) rotateY(-10deg);
    opacity: 1; }
  70% {
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
    -webkit-transform: perspective(400px) rotateY(10deg);
    -moz-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    -o-transform: perspective(400px) rotateY(10deg);
}
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.top .about-btn:hover {
  border: 1px solid #d3ad6f;
  color: #d3ad6f; }

.busin-wrap .pic .item .btn a {
  display: block;
  width: 100%;
  height: 100%; }
.busin-wrap .pic .item .btn:hover {
  color: #d3ad6f;
  border: 1px solid #d3ad6f; }

.news-wrap .detail-btn a {
  display: block;
  width: 100%;
  height: 100%; }
.news-wrap .detail-btn:hover {
  color: #d3ad6f;
  border: 1px solid #d3ad6f; }

.brand-wrap .car-slide .swiper-slide {
  position: relative;
}

.brand-wrap .car-slide .swiper-slide .selector {
  position: absolute;
  bottom: 0px;
  right: 20px;
  font-size: 16px;
  /*border: 1px solid #999;
  */width: 120px;
  color: #000;
  background-color: transparent;
  display: block;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-width: 0;
  padding: 3px 5px;
  border: 1px solid #000;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  background: url(/img/triangle-icon.png) no-repeat 98px center;
}

.modal-map {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .7);
  z-index: 10000;
  visibility: hidden;
}

.modal-map .close {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

#map {
  width: 80%;
  height: 500px;
  margin: auto;
  display: block;
  position: absolute;
  left: 10%;
  top: 50%;
  margin-top: -250px;
}