html,
body {
  position: relative;
  height: 100%;
}

body {
  background: url(../images/bg1.jpg) no-repeat 50% top;background-size: cover;background-position:center;
  font-family:"PingFang SC","SimSun","Microsoft YaHei",微软雅黑;;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}


a{text-decoration:none;color:#333}

ul,li{list-style:none;padding:0;margin:0}
.swiper-container{
  width: 100%;
  height: 100%;
}
.jiaopian{position: absolute;display: block;   overflow: hidden;padding:0;margin-left:0;margin-top:0;
  width: 100%;
  height: 100vh;
}

.jiaopian2{position: absolute;display: block;   overflow: hidden;padding:0;margin-left:0;margin-top:0;
  width: 2000px;
  height: 100vh;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  /*background: #fff; */

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.jiaopian{background: url(../images/jp1.png) repeat left top;background-size: auto 100vh;background-position:center;}
.jiaopian2{background: url(../images/00.jpg) repeat left top;background-size: auto 100vh;background-position:center;}
#content_0{background: url(../images/bg.jpg) no-repeat 50% top;background-size: cover;background-position:center;}
#content_1{background: url(../images/bg.jpg) no-repeat 50% top;background-size: cover;background-position:center;}
#content_2{background: url(../images/bg.jpg) no-repeat 50% top;background-size: cover;background-position:center;}
#content_3{background: url(../images/bg.jpg) no-repeat 50% top;background-size: cover;background-position:center;}
#content_4{background: url(../images/bg.jpg) no-repeat 50% top;background-size: cover;background-position:center;}
#content_5{background: url(../images/bg.jpg) no-repeat 50% top;background-size: cover;background-position:center;}
.info{background: url(../images/info.jpg) no-repeat 50% top;background-size: cover;background-position:center;}
#content_6{background: url(../images/06.jpg) no-repeat 50% top;background-size: cover}
#content_7{background: url(../images/07.jpg) no-repeat 50% top;background-size: cover}
#river2{background: url(../images/0f.png) no-repeat 50% top;background-size: cover;position: absolute;width: 100vw !important;height: 100vh}
#river1{background: url(../images/0e.png) no-repeat 50% top;background-size: cover;position: absolute;width: 100vw !important;height: 100vh}
#cloud1{background: url(../images/fly.png) no-repeat 50% top;background-size: cover;position: absolute;width: 100vw !important;height: 100vh}
#cloud2{background: url(../images/fly2.png) no-repeat 50% top;background-size: cover;position: absolute;width: 100vw !important;height: 100vh}
#content_1 .Cname{background: url(../images/c01.png) no-repeat;}
#content_2 .Cname{background: url(../images/c02.png) no-repeat;}
#content_3 .Cname{background: url(../images/c03.png) no-repeat;}
#content_4 .Cname{background: url(../images/c04.png) no-repeat;}
#content_5 .Cname{background: url(../images/c05.png) no-repeat;}
#content_6 .Cname{background: url(../images/c06.png) no-repeat;}
#content_7 .Cname{background: url(../images/c07.png) no-repeat;}




.pic { overflow: hidden;}
.pic li {width: 240px;height:140px;overflow: hidden;margin: 0 20px 20px  0;float: left;}
.pic li:nth-child(3n){margin-right: 0;}
.pic img{width: 100%;height: 100%;} .pic li:hover img{margin-top: -5%;margin-left: -5%;width: 110%;height: 110%;}
.list {overflow: hidden;}

.book { overflow: hidden;}
.book  li {width: 740px;height:22px;margin: 20px 0 21px 20px;float: left;}
.book  h2 {width: 650px;height:65px;margin: 0 0;float: left;text-align: left;font-size: 20px;color: #333;}
.book  span {width: 90px;height:65px;margin: 0 0;float: left;text-align: right;font-size: 18px}

.pics img {margin: 0;width: 100%;height: 100%;}
.swiper_switch{position:fixed;width: 100px; display: block; height: 200px;right: 0;bottom: 300px;z-index: 9999;}
.swiper_switch a {display: block;width: 98px;height:38px;margin: 1px;background-color: rgba(246, 247, 239, 0.3);text-align: center;line-height: 38px;}
.swiper_switch  a:hover { background-color: rgba(246, 247, 239, 0.6);}

.Cbox .swiper-slide{width: 100%;height: 460px;}
.info p{font-size: 14px;line-height: 14px;margin-top: 12px  ;color: #fff;}
.swiper-container-vv{width: 1200px;height: 100%;}

.video-js {
  margin-right: 17.5vh;
  margin-top: 35vh;
  width: 73.5vh;
  height: 41.5vh;
  box-shadow: #333 0PX 0PX 20PX;
  z-index: 10;
  float: right;
}
.container .Cright,.Cleft,.C3in,.C6in,.flashh,.flashh2,.breath-tit{width:133.3333333333vh;height:100vh;position: absolute;display: block;   overflow: hidden;padding:0;margin-left:0;margin-top:0;}
.container {position: relative;width:133.3333333333vh;height:100vh;}
.swiper-slide{width: 100%;height:100vh;background-size:cover;}
.info {width: 600px;background-color:#475664;}
.container .Cright,.Cleft,.C3in,.C6in,.flashh,.flashh2,.breath-tit{background-size:auto 100%; }
.swiper-slide,.container {min-width:600px;min-height: 400px; z-index: 9999;}


.swiper-slide .Cright{
  transform:translateX(500px);
  opacity:0;
  transition:all 0.6s;}
  .ani-slide  .Cright{
  transform:translateX(0px);
  opacity:1;
  }

  .swiper-slide .Cleft{
    transform:translateX(-200px);
    opacity:0;
    transition:all 0.3s;}
  .ani-slide .Cleft{
    transform:translateX(0px);
    opacity:1;
    }

    .swiper-slide .C3in{
      opacity:0;
      transition:all 3s;}
    .ani-slide .C3in{
      opacity:1;
      }
      
    .swiper-slide .C6in{
      opacity:0;
      transition:all 6s;}
    .ani-slide .C6in{
      opacity:1;
      }

     
   .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background: rgb(255, 255, 255);
        opacity: 0.6;
        box-shadow: 2px 2px 5px #333333;
  }
.fly {
    position:absolute;
    width:100%;
    z-index: 10000;
   animation-name:flymove;
    animation-duration:30s;
    animation-timing-function:linear;
    animation-iteration-count:20000;
   }
   @-webkit-keyframes  flymove {
    0% {
     background-position:100% 0px;
    }
    100% {
      background-position:0px 0px;
    }
   }
   @-moz-keyframes flymove {
    0% {
      background-position:100% 0px;
     }
     100% {
       background-position:0px 0px;
    }
   }
   @-ms-keyframes flymove {
    0% {
      background-position:100% 0px;
     }
     100% {
       background-position:0px 0px;
    }
   }

   .fly2 {
    position:absolute;
    width:100%;
    z-index: 10000;
   animation-name:fly2move;
    animation-duration:3s;
    animation-timing-function:linear;
    animation-iteration-count:20000;
   }
   @-webkit-keyframes  fly2move {
    0% {
     background-position:100% 0px;
    }
    100% {
      background-position:0px 0px;
    }
   }
   @-moz-keyframes fly2move {
    0% {
      background-position:100% 0px;
     }
     100% {
       background-position:0px 0px;
    }
   }
   @-ms-keyframes fly2move {
    0% {
      background-position:100% 0px;
     }
     100% {
       background-position:0px 0px;
    }
   }

   .reel-left{
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    max-height: 1000px;
    z-index: 999;
  }
  
  .reel-right{
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    max-height: 1000px;
    margin-left: -6px;
    z-index: 990;
  }
  
  .reel-right2{
    position: absolute;
    left: 0;
    top: 0px;
    width: 150vw;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    max-height: 1000px;
    z-index: 995;
    opacity: 0;
  }
  
  .reel-left img,.reel-right img,.reel-right2 img{
    height: 100%;
  }
  
  @keyframes reel{

    
    0% {
      width: 150vw; opacity: 1;
     }
    10% {
      opacity: 1;
     }
     100% {
      width: 0vw; left: 150vw;opacity: 1;
     }
  }
  
  .reel-right2{
    animation:'reel' 3s linear 0s forwards;
    -ms-animation:reel 3s linear 0s forwards;
    -moz-animation:reel 3s linear 0s forwards;
  	-o-animation:'reel' 3s linear 0s forwards;
	-webkit-animation:'reel'3s linear 0s forwards;
}


.flashh {  
  animation:'flashh' 3s linear 0s infinite;
  -ms-animation:flashh  3s linear 0s infinite;
  -moz-animation:flashh  3s linear 0s infinite;
  -o-animation:'flashh' 3s linear 0s infinite;
-webkit-animation:'flashh'3s linear 0s infinite;
 }
 @-webkit-keyframes  flashh {
  0% {
    opacity: 1;
   }
   50% {
    opacity: 0.21;
   }
   100% {
     
    opacity: 1;
  }
 }
 @-moz-keyframes flashh {
  0% {
    opacity: 1;
   }
   50% {
    opacity: 0.21;
   }
   100% {
     
    opacity: 1;
  }
 }
 @-ms-keyframes flashh {
  0% {
    opacity: 1;
   }
   50% {
    opacity: 0.21;
   }
   100% {
     
    opacity: 1;
  }
 }


 .flashh2 {
  animation:'flashh2' 5s linear 0s infinite;
  -ms-animation:flashh2  5s linear 0s infinite;
  -moz-animation:flashh2  5s linear 0s infinite;
  -o-animation:'flashh2' 5s linear 0s infinite;
-webkit-animation:'flashh2'5s linear 0s infinite;
  }
  @-webkit-keyframes  flashh2 {
   0% {
     opacity: 0.1;
    }
    30% {
     opacity: 1;
    }
    60% {
     opacity: 1;
    }
    100% {
      
     opacity: 0.1;
   }
  }
  @-moz-keyframes flashh2 {
    0% {
      opacity: 0.1;
     }
     30% {
      opacity: 1;
     }
     60% {
      opacity: 1;
     }
     100% {
       
      opacity: 0.1;
   }
  }
  @-ms-keyframes flashh2 {
    0% {
      opacity: 0.1;
     }
     30% {
      opacity: 1;
     }
     60% {
      opacity: 1;
     }
     100% {
       
      opacity: 0.1;
   }
  }
.breath {
  position:absolute;
  width:1200px;
  top:000px;    height:800px;
  z-index:1;
  right: 0;
 animation-name:breath;
  animation-duration:12s;
  animation-timing-function:linear;
  animation-iteration-count:20000;
 }
 @-webkit-keyframes  breath {
  0% {
    margin: 0;background-size: 1200px 800px;
   }
   50% {
     background-size: 1225px 815px;
   }
   100% {
     margin: 0;background-size: 1200px 800px;
  }
 }
 @-moz-keyframes breath {
  0% {
    margin: 0;background-size: 1200px 800px;
   }
   50% {
     background-size: 1225px 815px;
   }
   100% {
     margin: 0;background-size: 1200px 800px;
  }
 }
 @-ms-keyframes breath {
  0% {
    margin: 0;background-size: 1200px 800px;
   }
   50% {
     background-size: 1225px 815px;
   }
   100% {
     margin: 0;background-size: 1200px 800px;
  }
 }
 .breath-tit {
  width:1200px;
  height:900px;
  margin:0 auto;
  padding-top:0;
  z-index:99999;
  position:relative;
 }
 .breath-tit img {
  cursor:pointer;
  -webkit-animation:scaleout 26s infinite ease-in-out;
  animation:scaleout 26s infinite ease-in-out;
 }
 @-webkit-keyframes scaleout {
  0% {
   -webkit-transform:scale(1.0)
  }
  50% {
   -webkit-transform:scale(1.021);
   opacity:0.86;
  }
  100% {
   -webkit-transform:scale(1.0);
   opacity:1;
  }
 }
 @keyframes scaleout {
  0% {
   transform:scale(1.0);
   -webkit-transform:scale(1.0);
  }
  50% {
   transform:scale(1.1);
   -webkit-transform:scale(1.021);
   opacity:0.86;
  }
  100% {
   transform:scale(1.0);
   -webkit-transform:scale(1.0);
   opacity:1;
  }
 }

   .cover {
    position:fixed;
    width:100vw;
    top:0;    height:100vh;background: rgb(227, 208, 159);
    z-index:9999;
    display: none;
   animation-name:flycut;
    animation-duration:3s;
    animation-timing-function:linear;
    
   }
   @-webkit-keyframes  flycut {
    0% {
      display:block;
      left:0;
    }
    50% {
      display:block;
      
      left:50vw;
    }
    100% {
      left:100vw;
      display: none;
    }
   }
   @-moz-keyframes flycut {
    0% {
      left:0;
    }
    50% {
      
      left:50vw;
    }
    100% {
      left:100vw;
      display: none;
    }
   }
   @-ms-keyframes  flycut {
    0% {
      left:0;
    }
    50% {
      
      left:50vw;
    }
    100% {
      left:100vw;
      display: none;
    }
   }

  .swiper-pagination-bullet-active {
    opacity: 1;
    background:rgb(253, 125, 125);
}
.content{
  margin: 12.2% auto auto 20.6%;
  width: 62.5%;
  height: 64.7%;
  padding: 2% 2% 3% 3%;
}.content p{
  font-size: 2vh;
  line-height: 3vh;
  text-decoration: none;
  text-indent: 4vh;
  text-align: left;color: #fff;
}
.dl3{ opacity: 0;
  animation:'cdelay' 2s linear 1s forwards;
  -ms-animation:cdelay 2s linear 1s forwards;
  -moz-animation:cdelay 2s linear 1s forwards;
  -o-animation:'cdelay' 2s linear 1s forwards;
  -webkit-animation:'cdelay' 2s linear 1s forwards;
  }
  @-webkit-keyframes  cdelay {
    0% {
     opacity: 0;
    }
    100% {
      opacity: 1;
    }
   }
  @-moz-keyframes cdelay {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
   }
   @-ms-keyframes cdelay {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
   }
   @keyframes cdelay {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
   }

.dl4{ animation-delay:4s;}