/*banner*/
.bannerDiv{ position: relative; }
.bannerDiv .bg{ position: absolute; left: 0; z-index: 2; bottom: 0; width: 100%; height: 1.0rem; background: url(../images/11.png) center no-repeat; background-size: cover; }
.bannerDiv .videoDiv{ position: absolute; right: 50%; margin-right: -8.0rem; bottom: 1.5rem; z-index: 2; }
.bannerDiv .videoDiv .limg img{ width: 2.6rem; }
.bannerDiv .videoDiv .ico{ position: absolute; left: 50%; margin-left: -23px; top: 50%; margin-top: -23px; z-index: 1; }
.bannerDiv .pjpj{ display: none; }

.ind-banner{width: 100%; overflow: hidden; z-index: 1;} 
.ind-banner .swiper-slide {position: relative; }
.ind-banner .swiper-slide a{ display: block; width: 100%; height: 100%; }
.ind-banner .swiper-slide .bg img{ width: 100%; }
.ind-banner .onebox{ position: absolute; left: 50%; margin-left: -8.0rem; top: 50%; transform: translateY(-50%); z-index: 2; } 
.ind-banner .onebox .txt{ font-size: 0.72rem; line-height: 0.72rem; color: #fff; font-weight: bold; padding-bottom: 0.6rem; text-transform: uppercase; }
.ind-banner .onebox .wen{ font-size: 0.6rem; line-height: 0.7rem; color: #fff; font-weight: bold; padding-bottom: 0.6rem; text-transform: uppercase; }
.ind-banner .btnDiv{ position: relative; width: 132px; height: 48px; line-height: 44px; text-align: center; border: #fff solid 2px; box-sizing: border-box; color: #fff; font-size: 16px; }
.ind-banner .btnDiv:hover{ border: #ab128e solid 2px; background: #ab128e; color: #fff;}
.ind-banner .xxx{ position: absolute; right: 50%; margin-right: -8.0rem; top: 50%; transform: translateY(-50%); z-index: 2; }
.ind-banner .xximg img{ width: 3.41rem; }

.ind-banner .layer{ position: absolute; left: 50%; margin-left: -8.0rem; bottom: 1.5rem; z-index: 1; width: 130px; height: 28px;}
.ind-banner .num{ font-size: 30px; color: #fff; text-align: center; line-height: 24px; font-family:Gilroy;}
.ind-banner .num span{ color: rgba(255,255,255,0.5); font-size: 14px;}
.ind-banner .prev{ z-index: 2; left: 0; position: absolute; display: block; background: url(../images/nimg15_left.png) center no-repeat; width: 15px; height: 28px; top: 0; } 
.ind-banner .next{ z-index: 2; right: 0; position: absolute; display: block; background: url(../images/nimg15_right.png) center no-repeat; width: 15px; height: 28px; top: 0;} 
.ind-banner .prev:hover{ background: url(../images/nimg15_lefton.png) center no-repeat;}
.ind-banner .next:hover{ background: url(../images/nimg15_righton.png) center no-repeat;}

.scrollDown{ position: absolute; z-index:2; left: 50%; margin-left: -32px; width: 64px; bottom: 1.5rem; height: 75px;}
.scrollDown p{ font-size: 14px; color: #fff; text-align: center; }

@keyframes start{0%,30%{opacity:0;-webkit-transform:translate(0,-8px)}60%{opacity:1;-webkit-transform:translate(0,0)}100%{opacity:0;-webkit-transform:translate(0,10px)}}
@-webkit-keyframes start{0%,30%{opacity:0;-webkit-transform:translate(0,-8px)}60%{opacity:1;-webkit-transform:translate(0,0)}100%{opacity:0;-webkit-transform:translate(0,10px)}}
@-moz-keyframes start{0%,30%{opacity:0;-moz-transform:translate(0,-8px)}60%{opacity:1;-moz-transform:translate(0,0)}100%{opacity:0;-moz-transform:translate(0,10px)}}
.pre-wrap{width:64px;height:75px;position:relative;animation:start 2.5s infinite ease-in-out;-webkit-animation:start 2.5s infinite ease-in-out;-moz-animation:start 2.5s infinite ease-in-out;}
.pre-wrap img{ position: absolute; left: 50%; margin-left: -15px; bottom: 0; }
/*banner结束*/

.indexPart1{ position: relative; }
.indexPart1 .leftDiv{ position: relative; float: left; width: 50%; height: 8.0rem; background: url(../images/indexPart1.jpg) center no-repeat; background-size: cover; }
.indexPart1 .leftLayer{ position: absolute; left: 50%; margin-left: -8.0rem; top: 1.4rem; z-index: 1; width: 4.5rem; }
.indexPart1 .name{ font-size: 0.48rem; line-height: 0.6rem; color: #4d515c; font-weight: bold; }
.indexPart1 .wen{ font-size: 0.36rem; color: #4d515c; font-weight: bold; padding: 25px 0 18px; }
.indexPart1 .content{ font-size: 16px; line-height: 30px; }
.indexPart1 .rightLayer{ position: absolute; right: 50%; margin-right: -8.0rem; z-index: 1; background: #fff; top: 1.4rem; width: 9.6rem; height: 5.2rem; border-radius: 6px; box-shadow: 0px 0px 30px 0px rgba(126, 149, 159, 0.1); }
.indexPart1 .pjDiv{ position: relative; width: 100%; height: 100%; background: url(../images/nimg960Bg.png) no-repeat center; background-size: 100%; }
.indexPart1 .pjDiv li{ position: absolute; opacity: 0; }
.indexPart1 .pjDiv li span{ position: absolute; display: block; color: #333; font-size: 0.14rem; line-height: 0.14rem;}

.indexPart1 .pjDiv .li01{ left: 0.76rem; top: 2.18rem; width: 2.12rem; height: 1.15rem; background: url(../images/nimg159Bg.png) right top no-repeat; background-size: 1.59rem; }
.indexPart1 .pjDiv .li01 span{ left: 0; bottom: 0; }
.indexPart1 .pjDiv .li02{ left: 1.28rem; top: 2.42rem; width: 2.08rem; height: 1.15rem; background: url(../images/nimg159Bg.png) right top no-repeat; background-size: 1.59rem; }
.indexPart1 .pjDiv .li02 span{ left: 0; bottom: 0; }
.indexPart1 .pjDiv .li03{ left: 1.88rem; top: 2.64rem; width: 2.08rem; height: 1.18rem; background: url(../images/nimg159Bg.png) right top no-repeat; background-size: 1.59rem; }
.indexPart1 .pjDiv .li03 span{ left: 0; bottom: 0; }
.indexPart1 .pjDiv .li04{ left: 2.3rem; top: 2.88rem; width: 2.16rem; height: 1.2rem; background: url(../images/nimg159Bg.png) right top no-repeat; background-size: 1.59rem; }
.indexPart1 .pjDiv .li04 span{ left: 0; bottom: 0; }
.indexPart1 .pjDiv .li05{ right: 3.42rem; top: 0.78rem; width: 1.85rem; height: 1.2rem; background: url(../images/nimg153Bg.png) left bottom no-repeat; background-size: 1.53rem; }
.indexPart1 .pjDiv .li05 span{ right: 0; top: 0; }
.indexPart1 .pjDiv .li06{ right: 2.34rem; top: 1.14rem; width: 1.84rem; height: 1.28rem; background: url(../images/nimg153Bg.png) left bottom no-repeat; background-size: 1.53rem; }
.indexPart1 .pjDiv .li06 span{ right: 0; top: 0; }
.indexPart1 .pjDiv .li07{ right: 1.88rem; top: 1.56rem; width: 1.98rem; height: 1.26rem; background: url(../images/nimg155Bg.png) left bottom no-repeat; background-size: 1.55rem; }
.indexPart1 .pjDiv .li07 span{ right: 0; top: 0; }
.indexPart1 .pjDiv .li08{ right: 0.96rem; top: 1.9rem; width: 1.86rem; height: 1.3rem; background: url(../images/nimg150Bg.png) left bottom no-repeat; background-size: 1.5rem; }
.indexPart1 .pjDiv .li08 span{ right: 0; top: 0; }


#particles-js {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.indexPart2{ padding: 1.4rem 0 2.85rem; background: url(../images/nimg1280Bg.png) center 1.4rem no-repeat; }
.indexPart2 .title{ font-size: 0.48rem; line-height: 0.48rem; color: #4d515c; font-weight: bold; padding-bottom: 70px;}
.indexPart2 .bigBox{ position: relative; height: 532px;}
.indexPart2 .mxfDiv{ padding-left: 3.0rem; }
.shuju{ height: 325px; box-sizing: border-box; width: 420px; }
.shuju .swiper-container{ padding-left: 2.2rem; }
.shuju .swiper-slide{ background: #fff; }
.shuju .ico{ padding-bottom: 0.4rem; }
.shuju .num{ font-size: 18px; color: #4d515c; position: relative; display: inline-block; padding-right: 22px; }
.shuju .num em{ font-size: 0.72rem; line-height: 0.72rem; color: #a50186; font-family: bold; }
.shuju .num span{ position: absolute; right: 0; top: 5px; }
.shuju .wen{ font-size: 18px; color: #4d515c; padding-top: 25px;}
.shuju .swiper-pagination{  text-align: left; margin-left: 0; left: 0; width: 130px!important; top: 85px; margin-bottom: 0;  } 
.shuju .swiper-pagination-bullet { float: right; clear: both; display: block; width: 46px; height: 2px; opacity: 1; background: #b5b6be; border-radius: 0; -moz-border-radius: 0; margin-left:0; margin-right: 0; margin-top: 25px!important; } 
.shuju .swiper-pagination-bullet-active { background: #a50186; width: 130px;} 

.indexPart2 .round{ position: absolute; right: 3.0rem; top: 0; z-index: 10; overflow: hidden; width: 384px; height: 532px; background: url(../images/round.png) right center no-repeat;}
.indexPart2 .svg { position: absolute; right: 0; top: 0; opacity: 0; overflow: hidden; width: 532px; height: 532px;}
.indexPart2 .svg.on{ opacity: 1; }
.indexPart2 circle {  fill: transparent; stroke: transparent; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2000, 0; /*cx: 35; cy: 35; r: 34;*/}
.indexPart2 .svg.on circle {
  stroke: #ab128e;
    -webkit-animation: stroke-dash 2000ms linear;
    animation: stroke-dash 2000ms linear;
}
.indexPart2 .btnDiv{ padding-left: 2.2rem; }
.indexPart2 .btnDiv a{ display: block; width: 132px; height: 48px; line-height: 48px; text-align: center; color: #fff; font-size: 16px; }


@-webkit-keyframes stroke-dash {
  from {
    stroke-dasharray: 0, 2000;
    stroke-dashoffset: 886;
  }
  to {
    stroke-dasharray: 2000, 0;
    stroke-dashoffset: 886;
  }
}
@keyframes stroke-dash {
  from {
    stroke-dasharray: 0, 2000;
    stroke-dashoffset: 886;
  }
  to {
    stroke-dasharray: 2000, 0;
    stroke-dashoffset: 886;
  }
}


.indexPart3{ padding-top: 1.2rem; height: 9.2rem; box-sizing: border-box; background: url(../images/indexPart3.jpg) center no-repeat; background-size: cover; }
.indexPart3 .leftDiv{ width: 12.8rem; }
.indexPart3 .list li{ background: #fff; float: left; position: relative; box-sizing: border-box; height: 3.4rem;}
.indexPart3 .list li:after{ content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: url(../images/bugan.jpg) repeat-x; }
.indexPart3 .list li a{ display: block; width: 100%; height: 100%;}
.indexPart3 .list .short{ width: 46.09375%; padding: 0 3.84rem 0 0.4rem; }
.indexPart3 .list .long{ width: 53.90625%; padding: 0 4.8rem 0 0.4rem; }
.indexPart3 .list li .imgDiv{ position: absolute; right: 0; top: 0; overflow: hidden; z-index: 2; }
.indexPart3 .list .short .imgDiv{ width: 3.2rem; }
.indexPart3 .list .long .imgDiv{ width: 4.3rem; }
.indexPart3 .list li .imgDiv img{ width: 100%; }
.indexPart3 .list li .conDiv{ position: relative; z-index: 2; }
.indexPart3 .list li .name{ padding-top: 0.5rem; font-weight: bold; font-size: 0.24rem; line-height: 0.3rem; color: #4d515c; }
.indexPart3 .list li .wen{ line-height: 0.24rem; font-size: 0.16rem; color: #707070; padding-top: 0.25rem; }
.indexPart3 .list li:hover .imgDiv img{ transform:scale(1.1);-webkit-transform:scale(1.1);}
.indexPart3 .list li:hover .name, .indexPart3 .list li:hover .wen{ color: #fff; }
.indexPart3 .list li:hover:after{ width: 50%; }

.indexPart3 .list2 li{ background: #fff; float: left; position: relative; box-sizing: border-box; height: 3.4rem;}
.indexPart3 .list2 li:after{ content: ''; position: absolute; right: 0; top: 0; width: 0; height: 100%; background: url(../images/bugan.jpg) repeat-x; }
.indexPart3 .list2 li a{ display: block; width: 100%; height: 100%;}
.indexPart3 .list2 .short{ width: 46.09375%; padding: 0 0.4rem 0 3.84rem; }
.indexPart3 .list2 .long{ width: 53.90625%; padding: 0 0.4rem 0 4.8rem; }
.indexPart3 .list2 li .imgDiv{ position: absolute; left: 0; top: 0; overflow: hidden; z-index: 2; }
.indexPart3 .list2 .short .imgDiv{ width: 3.2rem; }
.indexPart3 .list2 .long .imgDiv{ width: 4.3rem; }
.indexPart3 .list2 li .imgDiv img{ width: 100%; }
.indexPart3 .list2 li .conDiv{ position: relative; z-index: 2; }
.indexPart3 .list2 li .name{ padding-top: 0.5rem; font-weight: bold; font-size: 0.24rem; line-height: 0.3rem; color: #4d515c; }
.indexPart3 .list2 li .wen{ line-height: 0.24rem; font-size: 0.16rem; color: #707070; padding-top: 0.25rem; }
.indexPart3 .list2 li:hover .imgDiv img{ transform:scale(1.1);-webkit-transform:scale(1.1);}
.indexPart3 .list2 li:hover .name, .indexPart3 .list2 li:hover .wen{ color: #fff; }
.indexPart3 .list2 li:hover:after{ width: 50%; }

.indexPart3 .rightDiv{ width: 2.2rem; }
.indexPart3 .title{ font-size: 0.48rem; line-height: 0.48rem; color: #4d515c; font-weight: bold; padding-bottom: 25px; }
.indexPart3 .msg{ font-size: 0.16rem; line-height: 30px; }
.indexPart3 .btnDiv{ padding-top: 0.72rem; }
.indexPart3 .btnDiv a{ display: block; width: 157px; height: 48px; line-height: 44px; border: #a50186 solid 2px; box-sizing: border-box; text-align: center; font-size: 16px; color: #a50186; }
.indexPart3 .btnDiv a:hover{ background: #a50186; color: #fff; }

.indexPart4{ padding: 1.2rem 0 1.4rem; }
.indexPart4 .title{ text-align: center; color: #4d515c; font-weight: bold; font-size: 0.48rem; line-height: 0.48rem; }
.indexPart4 .wen{ text-align: center; font-size: 0.24rem; line-height: 0.24rem; padding: 12px 0 40px; }
.indexPart4 .leftDiv{ width: 10.66rem; position: relative; }
.indexPart4 .leftDiv a{ display: block; width: 100%; height: 100%; }
.indexPart4 .leftDiv .imgDiv img{ width: 100%; }
.indexPart4 .leftDiv .layer{ position: absolute; left: 0; bottom: 0; width: 8.0rem; height: 1.64rem; background: #fff; overflow: hidden; border-top-right-radius: 64px; }
.indexPart4 .leftDiv .layer:after{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #efeff1; }
.indexPart4 .leftDiv .layer:before{ content: ''; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: #a50186; }
.indexPart4 .leftDiv .time{ position: relative; z-index: 2; padding: 0.5rem 0 0 0.5rem; font-size: 0.18rem; line-height: 0.18rem; color: #a50186; font-family:Gilroy; }
.indexPart4 .leftDiv .name{ position: relative; z-index: 2; font-size: 0.24rem; color: #333; padding: 0.15rem 0 0 0.5rem; }
.indexPart4 .leftDiv:hover .layer:before{ width: 100%; }
.indexPart4 .leftDiv:hover .time, .indexPart4 .leftDiv:hover .name{ color: #fff; }
.indexPart4 .rightDiv{ width: 5.05rem; position: relative; }
.indexPart4 .rightDiv:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 6px; background: #efeff1; }
.indexPart4 .rightDiv li{ height: 1.65rem; position: relative; }
.indexPart4 .rightDiv li:after{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #efeff1; }
.indexPart4 .rightDiv li .time{ padding: 0.4rem 0 0.1rem; font-size: 0.18rem; line-height: 0.18rem; color: #a50186; font-family:Gilroy;}
.indexPart4 .rightDiv li .name{ font-size: 0.24rem; line-height: 0.32rem; overflow: hidden; height: 0.64rem; color: #181818; }
.indexPart4 .rightDiv li:hover .name{ color: #a50186; }

.jobModal-box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  align-items: center;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.jobModal-box.on {
  display: flex;
  display: -webkit-box;
  /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box;
  /* Firefox 17- */
  display: -webkit-flex;
  /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex;
  /* Firefox 18+ */
  display: -ms-flexbox;
  /* IE 10 */
}


.jobModal-box .peopleLayer {
  width: 960px;
  margin: 0 auto;
  background: none;
  padding: 20px;
  position: relative;
  box-sizing: border-box;
}

.peopleLayer .close{position: absolute; z-index:2; display: block; right: 30px; top: 30px; width:30px; height: 30px; background: url(../images/close2.png) no-repeat;transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;}
.peopleLayer .close:hover { transform: rotate(-90deg);}
.jobModal-box .peopleLayer video{ width:100%;}












































































































