@charset "utf-8";
 
.banner{
   width: 100%;
   /* background: url(../images/bg.jpg) top center;  */
   height: 555px;
   text-align: center;
   position: relative;
   overflow: hidden;
}
.banner-main{
  height: 555px;
  padding-top: 30px;
  box-sizing: border-box;
  margin-top: -650px;
  min-width: 900px;
  width: 900px;
}
.banner-main img{ 
    width: 480px; 
    display: block;
    margin: 0 auto;
    animation: rotate2 1.2s ease-out 1;
    -webkit-animation: rotate2 1.2s ease-out 1;
    -moz-animation: rotate2 1.2s ease-out 1;
    -o-animation: rotate2 1.2s ease-out 1; 
}
.bg-bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .bg-bubble li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.25);
    bottom: -160px;
    -webkit-animation: square 25s infinite;
    animation: square 25s infinite;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    border-radius: 50%;
    box-shadow: 0 0 5px aliceblue;
  }
  .bg-bubble li:nth-child(1) {
    left: 5%;
  }
  .bg-bubble li:nth-child(2) {
    left: 15%;
    width: 80px;
    height: 80px;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-duration: 17s;
            animation-duration: 17s;
  }
  .bg-bubble li:nth-child(3) {
    left: 20%;
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
  }
  .bg-bubble li:nth-child(4) {
    left: 35%;
    width: 60px;
    height: 60px;
    -webkit-animation-duration: 22s;
            animation-duration: 22s;
    background-color: rgba(255, 255, 255, 0.25);
  }
  .bg-bubble li:nth-child(5) {
    left: 65%;
  }
  .bg-bubble li:nth-child(6) {
    left: 75%;
    width: 86px;
    height: 86px;
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
    background-color: rgba(255, 255, 255, 0.25);
  }
  .bg-bubble li:nth-child(7) {
    left: 27%;
    width: 90px;
    height: 90px;
    -webkit-animation-delay: 7s;
            animation-delay: 7s;
  }
  .bg-bubble li:nth-child(8) {
    left: 50%;
    width: 45px;
    height: 45px;
    -webkit-animation-delay: 15s;
            animation-delay: 15s;
    -webkit-animation-duration: 40s;
            animation-duration: 40s;
  }
  .bg-bubble li:nth-child(9) {
    left: 55%;
    width: 30px;
    height: 30px;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-duration: 40s;
            animation-duration: 40s;
    background-color: rgba(255, 255, 255, 0.25);
  }
  .bg-bubble li:nth-child(10) {
    left: 85%;
    width: 90px;
    height: 90px;
    -webkit-animation-delay: 11s;
            animation-delay: 11s;
  }


.banner-video{
    width: 100%;
    background: url(../images/bgfoot.jpg) bottom center; 
    height: 450px;
    text-align: center;
    position: relative; 
 }
 .banner-video-title{
    position: absolute;
    top: 60px;
    left: 8%;
    width: 500px;
 } 
 .bg-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
  }
  .bg-bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.25);
    bottom: -160px;
    -webkit-animation: square 25s infinite;
    animation: square 25s infinite;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
  }
  .bg-bubbles li:nth-child(1) {
    left: 5%;
  }
  .bg-bubbles li:nth-child(2) {
    left: 15%;
    width: 80px;
    height: 80px;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-duration: 17s;
            animation-duration: 17s;
  }
  .bg-bubbles li:nth-child(3) {
    left: 20%;
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
  }
  .bg-bubbles li:nth-child(4) {
    left: 35%;
    width: 60px;
    height: 60px;
    -webkit-animation-duration: 22s;
            animation-duration: 22s;
    background-color: rgba(255, 255, 255, 0.35);
  }
  .bg-bubbles li:nth-child(5) {
    left: 65%;
  }
  .bg-bubbles li:nth-child(6) {
    left: 75%;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
    background-color: rgba(255, 255, 255, 0.3);
  }
  .bg-bubbles li:nth-child(7) {
    left: 27%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 7s;
            animation-delay: 7s;
  }
  .bg-bubbles li:nth-child(8) {
    left: 50%;
    width: 45px;
    height: 45px;
    -webkit-animation-delay: 15s;
            animation-delay: 15s;
    -webkit-animation-duration: 40s;
            animation-duration: 40s;
  }
  .bg-bubbles li:nth-child(9) {
    left: 55%;
    width: 30px;
    height: 30px;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-duration: 40s;
            animation-duration: 40s;
    background-color: rgba(255, 255, 255, 0.4);
  }
  .bg-bubbles li:nth-child(10) {
    left: 85%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 11s;
            animation-delay: 11s;
  }
  @-webkit-keyframes square {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-650px) rotate(650deg);
              transform: translateY(-650px) rotate(650deg);
    }
  }
  @keyframes square {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-600px) rotate(600deg);
              transform: translateY(-600px) rotate(600deg);
    }
  }

  .seeVideo{ 
    min-width: 150px;
    max-width: 250px;
    display: block; 
    border: none; 
    color: #fff; 
    position: absolute; 
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0 2em;
    background: #004fa2; 
    overflow: hidden;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    z-index: 9;
    bottom: 70px;
    right: 20%;
    border-radius: 3px;
    cursor: pointer;
  }

    .seeVideo > span {
        display: inline-block;
        padding: 0.6em 0;
        opacity: 0;
        color: #fff;
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .seeVideo::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0.6em 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        box-sizing: border-box;
        -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .seeVideo:hover {
        background-color: #c50206;
    }
    .seeVideo:hover::before {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    .seeVideo:hover > span {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .seeVideo:hover > span:nth-child(1) {
        -webkit-transition-delay: 0.11s;
        transition-delay: 0.11s;
    }
    .seeVideo:hover > span:nth-child(2) {
        -webkit-transition-delay: 0.22s;
        transition-delay: 0.22s;
    }
    .seeVideo:hover > span:nth-child(3) {
        -webkit-transition-delay: 0.33s;
        transition-delay: 0.33s;
    }
    .seeVideo:hover > span:nth-child(4) {
        -webkit-transition-delay: 0.44s;
        transition-delay: 0.44s;
    } 

    .index-aboutus{
      margin: 65px auto 100px auto;
      overflow: hidden;
    }
    .index-all-title{
      width: 100%;
      text-align: center;
      height: auto;
      overflow: hidden;
      margin-bottom: 80px;
    }
    .index-aboutus-main{
      width: 1180px;
      height: auto;
      overflow: hidden;
      margin: 0 auto;
    }
    .index-aboutus-main .aboutus-l{
      width: 415px;
      height: auto;
    }
    .index-aboutus-main .aboutus-l .p1{
      font-size: 28px;
      line-height: 28px;
      margin-bottom: 30px;
      text-align: left;
    }
    .index-aboutus-main .aboutus-l .p2{ 
      line-height: 25px; 
      text-align: left;
      color: #888;
      font-size: 15px;
      margin-bottom: 25px;
    }
    .index-aboutus-main .aboutus-l .p3{
      text-align: left;
    }
    .index-aboutus-main .aboutus-l .p3 a{
      width: 150px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      background: #004fa2;
      font-size: 16px;
      display: inline-block;
      border-radius: 20px;
      text-align: center;
      letter-spacing: 2px;
    }
    .index-aboutus-main .aboutus-l .p3 a:hover{
      background-color: #c50206;
    }
    .aboutus-r{
      width: 675px;
      margin: 5px;
      height: 400px;
      position: relative;
      z-index: 1;
    }
    .aboutus-r img.aboutus-bg{
      position: absolute;
      left: 0px;
      top: 15px;
      z-index: 5;
    }
    .aboutus-r img.aboutus-bg2{
      position: absolute;
      right: 0px;
      top: 0;
      z-index: 5;
      box-shadow: 0 0 5px #999;
      cursor: pointer;
    }
    .index-product{
      margin: 65px auto 100px auto;
      overflow: hidden;
    }
    .index-product-main dl{
       float: left;
       margin: 0 1%;
       width: 18%;
       height: auto; 
       cursor: pointer;
    }
    .index-product-main dl dt{
      width: 100%;
      height: 250px;
      position: relative;
    }
    .index-product-main dl dt img{
      width: 100%;
      height: 250px;
    }
    .index-product-main dl dt p{
      background: rgba(0, 79, 162, 0.6);
      position: absolute;
      top: 0px;
      width: 100%;
      height: 100%;
      left: 0px;
      color: #fff;
      padding: 20px 10px;
      box-sizing: border-box;
      line-height: 26px;
      display: none;
    }
    .index-product-main dl:hover dt p{
      display: block;
    }
    .index-product-main dl dd{
      margin-top: 10px;
    }
    .index-product-main dl dd .p1{
      color: #333;
    }
    .index-product-main dl dd .p2{
      color: #999;
      font-size: 12px
    }
    .index-product-main dl:hover dd .p1{
      color: rgba(0, 79, 162);
    }

    .seeVideo_bg{ 
      height: 100%;
      width: 100%;
        background: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        bottom: 0;
        right: 0;
        height: 100vh; 
        display: none;
    }

    .videos{
      width: 80%;
      top: 50px;
      position: fixed;
      left: 10%;
    }
    .close{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.6);
      color: #333;
      line-height: 30px;
      text-align: center;
      font-size: 40px;
      right: 10px;
      position: fixed;
      top: 10px;
      z-index: 999;
      margin-right: 10px;
      cursor: pointer;
    }



.slideBox{width:100%;
  /* height:640px; */
  height:790px;
  overflow:hidden;position:relative}
.slideBox .hd{width:100%;position:absolute;bottom:0;z-index:1}
.slideBox .hd ul{text-align:center}
.slideBox .hd ul li{width:80px;height:36px;margin:0 3px;display:inline-block;position:relative}
.slideBox .hd ul li .dot{width:80px;height:4px;background-color:hsla(0,0%,60%,.4)}
.slideBox .hd ul li span{display:none;color:#fff;position:absolute;width:100%;font-size:14px;left:0;top:0;line-height:36px;cursor:pointer}
.slideBox .hd ul li.on .liner{width:80px;height:4px;animation:liner 2.5s;position:absolute;top:0;left:0;background:linear-gradient(90deg,#198cff,#8847c1)}
.slideBox .hd ul li:hover .dot{display:none}
.slideBox .hd ul li:hover{width:206px;height:36px;transform:translateY(-50%);background:linear-gradient(90deg,#198cff,#8847c1);transition:all .1s ease}
.slideBox .hd ul li:hover span{display:inline-block}
@keyframes liner{from{width:0}
to{width:100%}
}
.slideBox .bd{    width: 100%;
  position: relative;
  /* height: 600px; */
  height: 750px;
  overflow: hidden;
  margin: 20px auto;}
.slideBox .bd li{text-align:center;background-position: center;  
  /* height: 520px;    */
  height: 670px;
   margin: 40px;}
/* .slideBox .bd img{width:680px;height:640px} */
.slideBox .bd:hover~.prev{display:block}
.slideBox .bd:hover~.next{display:block}
.slideBox .prev:hover{display:block}
.slideBox .next:hover{display:block}
.slideBox .prev{    Z-INDEX: 1000;display:none;position:absolute;left:3%;top:50%;margin-top:-25px;width:29px;height:52px;background:url(../images/left_array.png) no-repeat;background-size:cover}
.slideBox .next{    Z-INDEX: 1000;display:none;position:absolute;right:3%;top:50%;margin-top:-25px;width:29px;height:52px;background:url(../images/right_array.png) no-repeat;background-size:cover}
.slideBox .bd li.active{animation-name:ai-big-out;animation-duration:.3s;animation-timing-function:ease;animation-fill-mode:forwards}
@keyframes ai-big-out{0%{z-index:3;transform:scale(1.1);opacity:1}
50%{transform:scale(1.2);opacity:.5}
to{transform:scale(1.3);opacity:1}
}

.main{margin: 40px auto;}   
.main .index-r{
  position: absolute;
  top: 0px;
  right: 0px;
  width: calc(100% - 820px);
  text-align: right;
 
}
.index-r-img img{
  width: 400px;
  animation: rotate2 1.2s ease-out 1;
  -webkit-animation: rotate2 1.2s ease-out 1;
  -moz-animation: rotate2 1.2s ease-out 1;
  -o-animation: rotate2 1.2s ease-out 1;
}
.index-r-img {    
  padding-top: 60px;
  padding-bottom: 50px;}
.index-r-txt{
  color: #fff;
  font-size: 21px;
  font-weight: 300;
  line-height: 38px;
}
.index-r-btn-a{
  display: block;
  margin: 10px;
  margin-top: 50px;
  width: 240px;
  color: #fff;
  float: right;
  text-align: center;
  background: #780890;
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  font-weight: 300;
  border-radius: 20px;
  cursor: pointer;
  transform:  all 1s;
}
.index-r-btn-a:hover{ 
  color: #fff;
  background: #630b75;
  box-shadow: 0px 0px 10px #10073e;
}
.index-r-line{
  display: block;
  height: 2px;
  border-radius: 1px;
  width: 240px;
  background: #fff;
  text-align: right; 
  margin-bottom: 60px;
  float: right;
}
.index-l{ 
  /* width: 760px; */
  width: 100%;
  overflow: hidden;
  background: rgb(255, 255, 255,0.1);
  border-radius: 20px;}