/* 使用 v-cloak 指令来解决屏幕闪动的问题 */
  /* v-cloak:防止页面加载时，出现vue.js的变量名 */
  [v-cloak]{
    display: none
  }

   #page_pc{
     min-width: 1400px;
     overflow-x: hidden;
   }

    /* 导航 */
    .navWrap{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 80px;
      background: #fff;
      z-index: 999;
      transition: all .3s;
    }
    .navShadow{
       box-shadow: 0 3px 7px rgba(102, 102, 102, .5)
    }
    .nav{
       width: 1300px;
       height: 80px;
       margin: 0 auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
    }
    .nav-ul{
      display: flex;
      justify-content: space-between;
      width: 596px;
      margin:10px 50px 0 0;
    }
    .nav-ul li{
       font-size: 16px;
       width: 25%;
       cursor: pointer;
       text-align: center;
    }
    .nav-ul li .menu-txt{
      display: block;
    }
    .nav-ul .li-active{
      width: 0px;
      height: 4px;
      display: inline-block;
      padding: 0;
      background: linear-gradient(to right, #ad28ff , #fe27b8);
      transition: all .3s;
    }
    .nav-ul li:hover .li-active,
    .nav-ul li.active .li-active{
      padding: 0 24%
    }

/* banner& swiper */
    .banner{
      margin-top: 80px;
    }
    #swiper1{
      width: 100%;
      overflow: hidden;
    }
    #swiper1 img{
      width: 100%;
    }
    #swiper1>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
      bottom: 35px;
    }
    #swiper1>.swiper-pagination-bullets .swiper-pagination-bullet{
      width: 24px;
      height: 24px;
      background: none;
      border: 2px solid #f5f5f0;
      border-radius: 50%;
      margin:0 20px 0 0;
    }
    #swiper1>.swiper-pagination-bullets .swiper-pagination-bullet-active{
      background: rgba(255,255,255,0.6);
    }
    #swiper1 .swiper-slide p{
      position: absolute;
      top: 5%;
      left: 20%;
      font-size: 50px;
    }

    #swiper2Wrap{
      position: absolute;
      top: 12.69%;
      left: 36.60%;
      z-index: 9;
      width: 465px;    /*  619   ÷   1385 =0.44693占大图比例   169*0.4469=465   */
    }
    #swiper2 img{
      width: 100%;
    }
    #swiper2 .swiper-button-prev{
      background: none;
      left: 0;
      height: auto;
    }
    #swiper2 .swiper-button-next{
      background: none;
      right: 0;
      height: auto;
    }

    .w1400{
      width: 1400px;
      margin: 0 auto;
    }

    /* 主内容区 */
    .content{
      position: relative
    }

    /* 内容背景图片 自适应 */
    .map-img{
      position: absolute;
      top: 0;
      right: 0;
    }
    .map-slide{
      position: absolute;
      top: 5%;
      left: 5%;
    }
    .ball-img{
      position: absolute;
      top: 0;
      left: 0;
    }
    .ball-img-bottom{
      position: absolute;
      bottom: 0;
      right: 0;
    }

    /* 关于我们 */
    .gywm{
       height: 750px;
       position: relative
    }

    .gywm .title{
      padding-top: 195px;
      font-size: 38px;
      font-weight: bold;
    }
    .gywm .desc{
      width: 616px;
      margin: 50px 0 10px;
      color: #212121;
      font-size: 16px;
      line-height: 42px;
    }


/* 发展历程 */
    .fzlc{
        padding-top: 100px;
        position: relative
    }
    .gywm-img03{
      position: absolute;
      right: 0;
      bottom: 5%;
      z-index: 10
    }
    .fzlc .title{
      /*padding-top: 195px;*/
      font-size: 38px;
      font-weight: bold;
    }
    .fzlc .fzlc-img01{
      margin: 70px 0 0px;
      text-align: center;
      display: block;
      position: relative;
      z-index: 9;
    }
    .fzlc .desc{
      display: flex;
      margin-top: 80px;
    }
    .fzlc .lbox{
      margin:48px 0 0 170px;
    }
    .fzlc .lbox .date{
      position: relative;
      margin-bottom: 50px;
      padding:0px 30px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: #fff;
      box-shadow: 0px 2px 12px rgba(0, 0, 0, .13);
      font-size: 18px;
      font-weight: bold;
    }
    .fzlc .lbox .date:before{
       position: absolute;
      display: inline-block;
      top: 20px;
      right: -9px;
      width: 0;
      height: 0px;
      content: '';
      border-style: solid;
      border-width: 9px;
      border-color: #fff #fff transparent transparent;
      transform: rotate(45deg);
      box-shadow: 0px 2px 12px rgba(0, 0, 0, .2);
      z-index: 1;
    }
    .fzlc .lbox .date:after{
      position: absolute;
      display: inline-block;
      top: 10px;
      right: 0px;
      width: 30px;
      height: 40px;
      content: '';
      background: #fff;
      z-index: 2;
    }
    .fzlc .cbox{
      margin: 0 70px 0 75px;
      position: relative;
      padding: 60px 0 0;
      background: url('../images/line.jpg') center 0 repeat-y;
    }
    .fzlc .cbox .line{
     /*  width: 4px;
      /* height: 300px; */
      /* background: #9999ff;
      position: absolute;
      top: 0;
      left: 14px; */ 
    }
    .fzlc .cbox .circle{
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      border: 4px solid #9085ff;
      margin-bottom: 78px;
    }
    .fzlc .rbox{
      margin-top: 48px;
    }
    .fzlc .rbox-des{
      height: 60px;
      display: flex;
      align-items: center;
      margin-bottom: 50px;
      /* background: #f00; */
    }
    .fzlc .rbox-des p{
      font-size: 18px;
      line-height: 36px;
    }


/* 项目介绍 */
    .xmjs{
        padding: 100px 0 80px 0;
        position: relative;
    }
    .xmjs-img-ball{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .xmjs .title{
      padding-bottom: 70px;
      font-size: 38px;
      font-weight: bold;
      position: relative;
      z-index: 9;
    }
    .xmjs .title-desc{
      font-size: 24px;
      line-height: 36px;
      font-weight: bold;
      text-align: center; 
    }
    .xmjs .title-desc span{
      background: linear-gradient(to right, #ad28ff , #fe27b8);
      -webkit-background-clip: text;
      color: transparent;
    }
    .xmjs .xmjs-img{
      margin: 25px 0 10px 0;
      position: relative;
      z-index: 9;
    }
    .xmjs p.text{
      font-size: 16px;
      line-height: 36px;
      text-align: center;
    }


/* 加入我们 */
    .jrwm{
      background: url('../images/jrwm-img01.jpg') center 0 no-repeat;
      height: 360px;
      padding-bottom: 80px;
      position: relative;
      z-index: 9;
    }
    .jrwm .title{
      padding: 45px 0 110px 50px;
      font-size: 38px;
      font-weight: bold;
      color: #fff;
    }
    .jrwm .ckxq-button{
       width: 180px;
       height: 50px;
       line-height: 50px;
       text-align: center;
       box-sizing: border-box;
       border: 2px solid #fff;
       border-radius: 5px;
       color: #fff;
       font-size: 24px;
       font-weight: bold;
       background: rgba(255, 255, 255, .3);
       margin: 0 0 40px 50px;
       cursor: pointer;
    }
    .jrwm p.text{
      margin-left: 50px;
      color: #fff;
      font-size: 24px;
    }


/* 页脚 */
    .footer{
      padding: 30px 0;
      width: 100%;
      background: #f5f5f5;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .footer p{
      color: #868686;
      line-height: 24px;
      font-size: 12px;
      font-weight: bold;
    }
    .footer p a{
      color: #868686;
    }
    .footer p a:hover{
      text-decoration: underline
    }