﻿@font-face {
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/polar.otf");
  font-family: 'Polar';
}
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/*
html, body {
  font-size: 62.5%;
  height: 100%;
  overflow: hidden;
}

body {
  background: #fff;
}

svg {
  display: block;
  overflow: visible;
}*/

.slider-container {
  position: relative;
  height: 875px;  font-size: 62.5%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: all-scroll; overflow: hidden;width: 100%;
}

.slider-control {
  z-index: 2;
  position: absolute;
  top: 0;
  width: 12%;
  height: 100%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  will-change: opacity;
  opacity: 0;
}
.slider-control.inactive:hover {
  cursor: auto;
}
.slider-control:not(.inactive):hover {
  opacity: 1;
  cursor: pointer;
}
.slider-control.left {
  left: 0;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
}
.slider-control.right {
  right: 0;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
}

.slider-pagi {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 2rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 0;
  list-style-type: none;
}
.slider-pagi__elem {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 1rem;
  height: 1rem;
  margin: 0 0.5rem;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
}
.slider-pagi__elem:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.2rem;
  height: 1.2rem;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.slider-pagi__elem.active:before, .slider-pagi__elem:hover:before {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

.slider {
  z-index: 1;
  position: relative;
  height: 100%;
}
.slider.animating {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  will-change: transform;
}
.slider.animating .slide__bg {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  will-change: transform;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 875px;
  overflow: hidden;
}
.slide.active .slide__overlay,
.slide.active .slide__text {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.slide__bg {
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background-size: cover;
  will-change: transform;
}
/*第一屏图片*/
.slide-0 {
  left: 0;
}
.slide-0 .slide__bg {
  left: 0;
  background-image: url("../images/banner_02_bg.jpg");
}
.slide-0 .slide__overlay { position: relative;
 width:100%;
}

.slide-0.active .slide-0-pic-top{-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity;
    -webkit-transform: translateY(0%); opacity: 1; transition-delay: 0.5s;
    transform: translateY(0%);}
.slide-0.active .slide-0-pic-bottom{-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity;
    -webkit-transform: translateY(0%); opacity: 1; transition-delay: 1s;
    transform: translateY(0%);}

.slide-0 .slide-0-pic-top{position: absolute;right: 10%; top: 0%;transition-delay: 0.5s;  transition: all 0.6s ease-in-out;-webkit-transform: translateY(-20%); opacity: 0;
    transform: translateY(-20%);}
.slide-0 .slide-0-pic-bottom{position: absolute;right: 30%; bottom: 0%;transition-delay: 0.1s;  transition: all 0.6s ease-in-out;-webkit-transform: translateY(20%); opacity: 0;
    transform: translateY(20%);}
.slide-0 .slide_hpm_text{position: absolute;
    width: 25%;
    top: 42%;
    left: 20%;
    color: #fff;
    -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }


.slide-0 .slide__text-desc {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1rem;line-height: 2.5rem;
    margin: 1.5rem 0rem;color: #a1b7d3;
}
.slide-0 .slide__text-desc a:hover{color: #ffcc00;}
.slide-0 .slide_video_text-link a{color: #dbe7f7;  text-decoration: none; background: url("../images/title_ico_white.png") no-repeat right center; padding-right: 15px; margin-right: 10px; }

.slide-0 .slide_detail_text-link a{color: #dbe7f7;  background: url("../images/title_ico_white.png") no-repeat right center; text-decoration: none;  padding-right: 15px; margin: 10px; }


/*第二屏开始*/

.slide-1.active .slide-1-pic-top{-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);}
.slide-1.active .slide-1-pic-bottom{-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity; 
    -webkit-transform: translateY(0%);
    transform: translateY(0%);}

.slide-1 .slide-1-pic-top{position: absolute;left: 50%; top:45%; -webkit-transform: translateY(-20%);
    transform: translateY(-20%);}
.slide-1 .slide-1-pic-bottom{position: absolute;left: 42%; top:15%; -webkit-transform: translateY(20%);
    transform: translateY(20%);}
.slide-1 .slide-1-pic-yinyin{position: absolute;left: 34%; bottom: 10%;}
.slide-1 .slide_right_text {
       width: 25%;
    right: 15%;
    top: 11%; position: absolute;
  }
  
  .slide-1 .slide_left_text {
       width: 33%;
    left: 12%;position: absolute;
    top: 31%;
  }
  
.slide-1 {
  left: 100%;
}
.slide-1 .slide__bg {
  left: -50%;
  background-image: url("../images/banner_03_bg.jpg");
}
.slide-1 .slide__overlay { position: relative;
 width:100%;
}



.slide-1 .slide__text-heading{color: #00336c;}

.slide-1 .slide__text-desc {color: #5b5b5b;}

.slide-1 .slide_video_text-link a{color: #393939;  text-decoration: none; background: url("../images/title_ico_red.png") no-repeat right center; padding-right: 15px; margin-right: 10px; }

.slide-1 .slide_detail_text-link a{color: #393939;  background: url("../images/title_ico_red.png") no-repeat right center; text-decoration: none;  padding-right: 15px; margin: 10px; }
.slide-1 .slide_video_text-link a:hover{color: #c4121a;}
.slide-1 .slide_detail_text-link a:hover{color: #c4121a;}


/*第三屏开始*/

.slide-2.active .slide-2-pic-top{-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);}



.slide-2 .slide-2-pic-top{position: absolute;right: 13%; bottom:0%; -webkit-transform: translateY(30%);
    transform: translateY(40%);}

.slide-2 .slide__text {
       width: 28%;
    left: 17%;
    top: 31%;
  }

.slide-2 .slide__overlay { position: relative;
 width:100%;
}


.slide-2 .slide_video_text-link a:hover{color: #fff;}
.slide-2 .slide_detail_text-link a:hover{color: #fff;}
.slide-2 .slide__text-heading{color: #fff;}

.slide-2 .slide__text-desc {color: #979797;}

.slide-2 .slide_video_text-link a{color: #c6c6c6;  text-decoration: none; background: url("../images/title_ico_red.png") no-repeat right center; padding-right: 15px; margin-right: 10px; }

.slide-2 .slide_detail_text-link a{color: #c6c6c6;background: url("../images/title_ico_red.png") no-repeat right center; text-decoration: none;  padding-right: 15px; margin: 10px; }


.slide-2 {
  left: 200%;
}
.slide-2 .slide__bg {
  left: -100%;
  background-image: url("../images/banner_04_bg_1.jpg");
}
.slide-2 .slide_slide-3_text-link a:hover{color: #fff;}

/*第四屏开始*/
/*.slide-3 {
  left: 300%;
}
.slide-3 .slide__bg {
  left: -150%;
  background-image: url("../images/banner_05_bg.jpg");
}

.slide-3.active .slide-3-pic-top{-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity;opacity: 1;
    -webkit-transform: translateY(0%);transition-delay: 0.5s;
    transform: translateY(0%);}

.slide-3.active .slide-3-pic-bottom{-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity; opacity: 1;
    -webkit-transform: translateY(0%);transition-delay: 1s;
    transform: translateY(0%);}


.slide-3 .slide-3-pic-top{position: absolute;right: 24%; top:0%;-webkit-transform: translateY(-40%);
    transform: translateY(-40%);opacity: 0;}
.slide-3 .slide-3-pic-bottom{position: absolute;right: 18%; bottom:0%;-webkit-transform: translateY(40%);
    transform: translateY(40%);opacity: 0;}
.slide-3 .slide__text {
       width: 28%;
    left: 19%;
    top: 31%;
  }

.slide-3 .slide__overlay { position: relative;
 width:100%;
}
.slide-3 .slide__text-heading{color: #fff;}

.slide-3 .slide__text-desc {color: #b8e0ce;}

.slide-3 .slide_video_text-link a{color: #d8f0e5;  text-decoration: none; background: url("../images/title_ico_white.png") no-repeat right center; padding-right: 15px; margin-right: 10px; }

.slide-3 .slide_detail_text-link a{color: #d8f0e5; background: url("../images/title_ico_white.png") no-repeat right center; text-decoration: none; padding-right: 15px; margin: 10px; }
.slide-3 .slide__text-link a:hover{color: #fffc00;}

*/
/*第五屏开始*/
/*.slide-4 {
  left: 400%;
}
.slide-4 .slide__bg {
  left: -200%;
  background-image: url("../images/banner_01_bg.jpg");
}
.slide-4 .slide__overlay-path {
  fill: #adc5cd;
}

.slide-4.active .slide__overlay .slide-4-prod-01{-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity;
    -webkit-transform: translateY(0%);opacity: 1;
    transform: translateY(0%);transition-delay: 0.5s;
    }

.slide-4.active .slide__overlay .slide-4-prod-02{-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity;
    -webkit-transform: translateY(0%);opacity: 1;
    transform: translateY(0%);transition-delay: 1s;
    }
    .slide-4.active .slide__overlay .slide-4-prod-03{-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity;
    -webkit-transform: translateY(0%);opacity: 1;
    transform: translateY(0%);transition-delay: 1.5s;
    }
    .slide-4.active .slide__overlay .slide-4-prod-04{-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
    will-change: transform, opacity;
    -webkit-transform: translateY(0%);transition-delay: 2s;
    transform: translateY(0%); opacity: 1;
    }

    

.slide-4 .slide-4-prod-01{position: absolute;left: 25%; bottom:35%;   -webkit-transform: translateY(30%);
    transform: translateY(30%); opacity: 0;}
.slide-4 .slide-4-prod-02{position: absolute;left: 37%; bottom:40%;-webkit-transform: translateY(40%);
    transform: translateY(40%); opacity: 0;}

.slide-4 .slide-4-prod-03{position: absolute;right: 36%; bottom:40%;-webkit-transform: translateY(20%);
    transform: translateY(20%); opacity: 0;}
.slide-4 .slide-4-prod-04{position: absolute;right: 23%; bottom:35%;-webkit-transform: translateY(50%);
    transform: translateY(50%);opacity: 0; }


.slide-4 .slide__text {
       width: 28%;
    left: 19%;
    top: 31%;
  }

.slide-4 .slide__overlay { position: relative;
 width:100%;
}.slide-4 .slide__text-desc a:hover{color: #fff;}
.slide-4 .slide__text-heading{color: #fff;}

.slide-4 .slide__text-desc {color: #b8e0ce;}

.slide-4 .slide_video_text-link a{color: #d8f0e5;  text-decoration: none; background: url("../images/title_ico_white.png") no-repeat right center; padding-right: 15px; margin-right: 10px; }

.slide-4 .slide_detail_text-link a{color: #d8f0e5; background: url("../images/title_ico_white.png") no-repeat right center; text-decoration: none; font-size: 1.5rem; padding-right: 15px; margin: 10px; }

*/

/*第六屏开始*/
.slide-3 {
  left: 300%;
}
.slide-3 .slide__bg {
  left: -150%;
  background-image: url("../images/banner_06_bg.jpg");
}
.slide-3 .slide__text {
       width: 28%;
    left: 19%;
    top: 31%;
  }

.slide-3 .slide__overlay { position: relative;
 width:100%;
}.slide-3 .slide__text-desc a:hover{color: #d70b02;}
.slide-3 .slide__text-heading{color: #d70b02;}

.slide-3 .slide__text-desc {color: #464646;}

.slide-3 .slide_video_text-link a{color: #2c2c2c;  text-decoration: none; background: url("../images/title_ico_red.png") no-repeat right center; padding-right: 15px; margin-right: 10px; }

.slide-3 .slide_detail_text-link a{color: #2c2c2c; background: url("../images/title_ico_red.png") no-repeat right center; text-decoration: none; padding-right: 15px; margin: 10px; }
.slide-3 .slide__text-link a:hover{color: #d70b02;}
/*第七屏开始*/
.slide-4 {
  left: 400%;
}
.slide-4 .slide__bg {
  left: -200%;
  background-image: url("../images/banner_07_bg.jpg");
}
.slide-4 .slide__text {
       width: 28%;
    left: 19%;
    top: 31%;
  }

.slide-4 .slide__overlay { position: relative;
 width:100%;
}.slide-4 .slide__text-desc a:hover{color: #d70b02;}
.slide-4 .slide__text-heading{color:  #d70b02;}

.slide-4 .slide__text-desc {color:#464646;}

.slide-4 .slide_video_text-link a{color: #2c2c2c;  text-decoration: none; background: url("../images/title_ico_red.png") no-repeat right center; padding-right: 15px; margin-right: 10px; }
.slide-4 .slide__text-link a:hover{color: #d70b02;}
.slide-4 .slide_detail_text-link a{color: #2c2c2c; background: url("../images/title_ico_red.png") no-repeat right center; text-decoration: none;  padding-right: 15px; margin: 10px; }


@media (max-width: 991px) {
  .slide-3 .slide__text {
    background-color: rgba(203, 198, 195, 0.8);
  }
}
.slide__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slide__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  min-height: 810px;
  -webkit-transition: opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
  transition: opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
  transition: transform 0.5s 0.5s, opacity 0.2s 0.5s;
  transition: transform 0.5s 0.5s, opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
  will-change: transform, opacity;
  -webkit-transform: translate3d(-20%, 0, 0);
          transform: translate3d(-20%, 0, 0);
  opacity: 0;
}
@media (max-width: 991px) {
  .slide__overlay {
    display: none;
  }
}
.slide__overlay path {
  opacity: 0.8;
}
.slide__text {
  position: absolute;
/*  width: 25%;
  bottom: 15%;
  left: 12%;*/
  color: #fff;
  -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
  transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  will-change: transform, opacity;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  opacity: 0;
}
@media (max-width: 991px) {
  .slide__text {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20rem;
    text-align: center;
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
    transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
    transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
    transition: transform 0.5s 0.5s, opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
    padding: 0 1rem;
  }
}
.slide__text-heading {
  font-family: "Polar", Helvetica, Arial, sans-serif;
  font-size: 1.8rem; font-weight: 100;
  margin-top: 5vh;
}
@media (max-width: 991px) {
  .slide__text-heading {
    line-height: 4rem;
    font-size: 3.5rem;
  }
}
.slide__text-desc {
     font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 0.95rem;line-height: 2.0rem;
    margin: 1.5rem 0rem;
}
@media (max-width: 991px) {
  .slide__text-desc {
    display: none;
  }
}
.slide__text-link {
  z-index: 5;
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 1.0rem;line-height: 1.8rem;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
@media (max-width: 991px) {
  .slide__text-link {
    display: none;
  }
}
/*.slide__text-link .slide_video_text-link a:before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  will-change: transform;
}
.slide__text-link .slide_video_text-link a:hover:before {
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}*/
