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

body {
  background: rgb(239, 233, 239);;
  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%;
}


.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;
}
#content_0{background: url(../images/00.jpg) no-repeat 50% top;background-size: cover}
#content_1{background: url(../images/01.jpg) no-repeat 50% top;background-size: cover}
  /* #content_2{background: url(../images/02.jpg) no-repeat 50% top;background-size: cover}
  #content_3{background: url(../images/03.jpg) no-repeat 50% top;background-size: cover}
  #content_4{background: url(../images/04.jpg) no-repeat 50% top;background-size: cover}
  #content_5{background: url(../images/05.jpg) no-repeat 50% top;background-size: cover}
  #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: 320px;right: 0;bottom: 200px;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:0 auto;width: 98vw;height: 60vw;box-shadow: #333333 10PX 10PX 10PX;z-index: 10;position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 1vw;}
.container .Cright,.Cleft,.C3in,.C6in,.bike{width:100%;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 {height: 100px!important;min-height:100px!important;background-color:#904c31;}
.container .Cright,.Cleft,.C3in,.C6in{background-size:auto 100%; position: relative;}
.swiper-slide,.container {width:100%;height: 100%; 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(0px);
    opacity:1;
    transition:all 0s;}
  .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%;
    top:000px;    height:800px;
    background:url(../images/fly.png)  no-repeat;
    z-index:1;
   animation-name:flymove;
    animation-duration:30s;
    animation-timing-function:linear;
    animation-iteration-count:20000;
   }
   @-webkit-keyframes  flymove {
    0% {
     background-position:0px 0px;
    }
    50% {
     background-position:100% 0px;
    }
    100% {
     background-position:0px 0px;
    }
   }
   @-moz-keyframes flymove {
    0% {
     background-position:0px 0px;
    }
    50% {
     background-position:100% 0px;
    }
    100% {
     background-position:0px 0px;
    }
   }
   @-ms-keyframes flymove {
    0% {
     background-position:0px 0px;
    }
    50% {
     background-position:100% 0px;
    }
    100% {
     background-position:0px 0px;
    }
   }


   #flowerleft{animation:flowerleft 5s infinite 1.3s linear;    background-image: url(images/2c.png);
    margin-left: -10%;
    background-position-x: 0;
    background-position-y: 6vh;
    transform-origin: left top;
}
  .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;
}
.bike {
 animation-name:bikemove;
  animation-duration:5s;
  animation-timing-function:linear;
  animation-iteration-count:20000;
background-repeat: no-repeat; background-position: bottom;background-size: 200px 200px;background-image: url(../images/90.png);z-index: 99999;}

 @-webkit-keyframes  bikemove {
   0% {
     transform:translateX(-60vw);
   }
   50% {
     transform:translateX(0);
   }
   100% {
     transform:translateX(60vw);
   }
  }
 @-moz-keyframes bikemove {
   0% {
     transform:translateX(-60vw);
   }
   50% {
     transform:translateX(0);
   }
   100% {
     transform:translateX(60vw);
   }
  }
 @-ms-keyframes bikemove {
   0% {
     transform:translateX(-60vw);
   }
   50% {
     transform:translateX(0);
   }
   100% {
     transform:translateX(60vw);
   }
  }

.bottom a {
    margin: 0 auto;
    bottom: 10%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    width: 100px;
    border-radius: 50px;
    background-color: red;
    border: 1px solid #eee;
    height: 26px;
    font-size: 16px;
    line-height: 16px;
    color: #fff;
    padding-top: 10px;
    z-index: 3;
}

@media screen and (orientation:landscape){
.Cleft{display:none;}
}
@media screen and (orientation:portrait){
 .Cleft{display:block;position: absolute;}
    .video-js{top: 20vw;
    transform: translate(0, 0);}
.bottom a {
  margin: 0 auto;
  bottom: 10%;
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
  width: 25vw;
  border-radius: 50px;
  background-color: rgba(255, 0, 0, 0.31);
  border: 1px solid #a0eedc;
  height: 5vw;
  font-size: 5vw;
  line-height: 5vw;
  color: #fff;
  padding: 2vw;
  z-index: 3;
}
}