/* body {  
    transform-origin: 0% 0%;  
    transform: rotate(90deg);    
    width: 100vh;  
    height: 750px; 
    position: absolute;  
    top: 0;  
    left: 750px;  
  } */
/* 背景音乐操作按钮 */
* {
    margin: 0;
    padding: 0;
}
html , body {
    width: 100%;
    height: 100%;
    /* overflow: auto; */
}
.warp {
    width: 100%;
    height: 100%;
}
.left-tuch-text {
  position: fixed;
  right: 50px;
  bottom: 110px;
  font-size: 32.003px;
  /* transform: rotate(90deg); */
  transform-origin: 0 0;
  color: #9b6943;
  /* opacity: 0; */
  display: none;
}
.left-tuch {
  position: fixed;
  right: 190px;
  bottom: 110px;
  width: 39px;
  height: 44.002px;
  /* opacity: 0; */
  display: none;
  /* transform: rotate(90deg); */
  transform-origin: 0 0;
  animation: left-tuch_anim 3s linear infinite normal forwards;
}
@keyframes left-tuch_anim {
  0% {
    right: 205px;
  }
  25% {
    right: 190px;
  }
  50% {
    right: 205px;
  }
  75% {
    right: 190px;
  }
  100% {
    right: 205px;
  }
}
.music {
    position: fixed;
    right: 37.5px;
    top: 37.5px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    z-index: 9999;
    background: url("../img/stop.png") center center no-repeat;
    background-size: 100%
}

.music.play {
    background: url("../img/play.png") center center no-repeat;
    background-size: 100%;
    animation: play linear 3s infinite;
    -webkit-animation: play linear 3s infinite
}

.music.stop {
    animation: play linear 3s infinite;
    -webkit-animation: play linear 3s infinite
}

@keyframes play {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg)
    }
}

.video_img{position: absolute;left: 0;top: 0;background: #fff;width: 100%;height: 100%;z-index: 111;}
.video_img .fm-img{width: 100%;height: 100%;display: block;}
.video_img .paly-video{
  width: 170.002px;
  height: 170.002px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -84.998px;
  margin-left: -84.998px;
}

.closeVideo{
    width: 150px;
    height: 50.002px;
    font-size: 32.003px;
    line-height: 50.002px;
    position: absolute;
    right: 125.003px;
    top: 57.997px;
    z-index: 1111;
    cursor: pointer;
    color: #fff;
    background: rgba(255,255,255,.3);
    text-align: center;
    border-radius: 12px;
}
.closeVideo2{
    width: 150px;
    height: 50.002px;
    font-size: 32.003px;
    line-height: 50.002px;
    position: absolute;
    right: 125.003px;
    top: 57.997px;
    z-index: 100;
    cursor: pointer;
    color: #fff;
    background: rgba(255,255,255,.3);
    text-align: center;
    border-radius: 12px;
}
.closeVideo3{
    width: 150px;
    height: 50.002px;
    font-size: 32.003px;
    line-height: 50.002px;
    position: absolute;
    right: 125.003px;
    top: 345px;
    z-index: 100;
    cursor: pointer;
    /* color: #fff;
    background: rgba(255,255,255,.3); */
    color: #9b6943;
    background: rgba(255,255,255,0.5);
    text-align: center;
    border-radius: 12px;
    display: none;
    transform: rotate(90deg);
    transform-origin: 0 0;
}

.si-btn-tips{
  width: 50.002px;
  height: 42.998px;
  font-size: 32.003px;
  line-height: 50.002px;
  position: absolute;
  left: 50%;
  bottom: 100px;
  margin-left: -22.5px;
  z-index: 100;
  cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,.3);
  text-align: center;
  border-radius: 12px;
  opacity: 0;
  /* transform: rotate(90deg);
  transform-origin: 0 0; */
}

.si-btn-tips-an {
  animation: tips_anim 3s linear infinite normal forwards;
}

@keyframes tips_anim {
  0% {
    bottom: 135px;
    opacity: 0;
  }
  25% {
    bottom: 100px;
    opacity: 1;
  }
  50% {
    bottom: 135px;
    opacity: 0;
  }
  75% {
    bottom: 100px;
    opacity: 1;
  }
  100% {
    bottom: 135px;
    opacity: 0;
  }
}

#dhVideo{
    width: 100%;
    height: 100%;
    position: absolute;
}
#videoBox {
  width: 100%;
  height: 100%;
}


#app {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
/* .page1 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
} */
.page2 {
    width: 100%;
    height: 100%;
    background: url('../img/bg2.png?v=1') no-repeat left center;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.page3 {
    width: 100%;
    height: 100%;
    background: url('../img/bg3.png') no-repeat left center;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}
.page4 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 100%;
    top: 0;
}
.goLeft1 {
    animation: animation 1s infinite forwards;
    animation-iteration-count: 1;
}
@keyframes animation {  
    from { 
        transform: translateX(0);  
    }  
    to { 
        transform: translateX(-100%);  
    }  
}
.goLeft2 {
    animation: animation2 1s infinite forwards;
}
@keyframes animation2 {  
    from { 
        transform: translateX(0);  
      }  
      to { 
        transform: translateX(100%);  
      } 
  }


  /* 第一屏元素 */
  .page-top {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 37.5px;
    padding-bottom: 0;
    box-sizing: border-box;
  }
  .dw-logo {
    width: 315px;
  }
  .zcy-icon {
    width: 1065px;
  }
  .zsj-box {
    width: 1162.5px;
    height: 375px;
    display: flex;
    align-items: center;
    margin: 0 auto;
  }
  .rw-box {
    width: 495px;
    z-index: 111;
  }
  .rw-icon{
    width: 0px;
    /* width: 480.997px; */
    /* height: 291px; */
    /* z-index: 111; */
  }
  .ld-box {
    /* width: 1087.5px; */
    width: 360px;
    height: 375px;
    background: url(../img/zsj-dy.png) no-repeat;
    background-size: auto 100%;
    margin-left: -375px;
    opacity: 0;
    text-align: center;
    line-height: 375px;
  }
  .jz-box {
    width: 71.25px;
    height: 375px;
    background: url(../img/zsj-dy.png) no-repeat right center;
    background-size: auto 100%;
    transform: translate3d(0,0,0);
    opacity: 0;
  }
  .text-dy {
    width: 672px;
    height: 188.002px;
    opacity: 0;
    margin-left: 37.5px;
  }
  .bczh-des {
    width: 870px;
    display: block;
    margin: 0 auto;
    opacity: 0;
    margin-top: 37.5px;
  }
  .bczh-des-an {
    animation: animation3 2s infinite forwards;
    animation-iteration-count: 1;
  }
  @keyframes animation3 {  
    from { 
        opacity: 0; 
      }  
      to { 
        opacity: 1;  
      } 
  }
  .bczh-box-1 {
    width: 1057.5px;
    height: 375px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    margin-top: 22.5px;
    position: relative;
    z-index: 111;
  }
  .bczh-jz-box1-1 {
    width: 71.25px;
    height: 375px;
    background: url(../img/bczh-2-jz-new.png) no-repeat;
    background-size: auto 100%;
  }
  .bczh-jz-box2-1 {
    width: 71.25px;
    height: 375px;
    background: url(../img/bczh-2-jz-new.png) no-repeat right center;
    background-size: auto 100%;
    transform: translate3d(0,0,0);
  }
  .bczh-logo-1 {
    width: 600px;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    opacity: 0; 
  }
  .bg-2-zcy {
    /* width: 720.997px;
    height: 213px; */
    width: 0;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .bczh-box {
    width: 1021.5px;
    height: 375px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    margin-top: 22.5px;
    position: relative;
    z-index: 111;
  }
  .bczh-jz-box1 {
    width: 71.25px;
    height: 375px;
    background: url(../img/bczh-jz-bg.png) no-repeat;
    background-size: auto 100%;
  }
  .bczh-jz-box2 {
    width: 71.25px;
    height: 375px;
    background: url(../img/bczh-jz-bg.png) no-repeat right center;
    background-size: auto 100%;
    transform: translate3d(0,0,0);
  }
  .bczh-logo {
    width: 450px;
    position: absolute;
    left: 50%;
    margin-left: -225px;
    opacity: 0; 
  }
  .bczh-logo-an {
    animation: animation4 2s infinite forwards;
    animation-iteration-count: 1;
  }
  @keyframes animation4 {  
    from { 
        opacity: 0; 
      }  
      to { 
        opacity: 1;  
      } 
  }
  .cxqd-box {
    width: 412.5px;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -37.5px;
    position: relative;
    /* overflow: hidden; */
  }
  .cxqd-box img {
    width: 60px;
    opacity: 0;
    transform: translate(0 , -225px , 0.998px);  
    transition:opacity 1s , transform 1s
  }
  .cxqd-box img.visible {
    opacity:1;
    transform: translate(0 , 0 , 0.998px);  
  }

  /* 春 */
  .chun-box {
    width: 9005.003px;
    /* height: 750px; */
    height: 100%;
    background: url(../img/chun-bg1.png) no-repeat left center;
    background-size: 100% 100%;
    position: absolute;

    top: 0;
    z-index: 1111111;
    padding: 30px;
    padding-bottom: 0;
    box-sizing: border-box;
    /* display: flex; */
    align-items: center;
    display: none;
  }
  .chun-content {
    width: 8619.997px;
    height: 100%;
    max-height: 720px;
    background: url(../img/chun-bg2.png) no-repeat left center;
    background-size: 100% 100%;
    margin-left: -16.5px;
    display: flex;
  }
  .chun-shu {
    width: auto;
    height: 690px;
    margin-bottom: 30px;
    z-index: 1;
  }
  .jq24-item {
    width: 1125px;
    height: 750px;
    margin-top: -30px;
    margin-left: 16.5px;
    padding-bottom: 30px;
    padding-left: 75px;
    box-sizing: border-box;
    position: relative;
    margin-right: 262.5px;
  }
  .jq-t {
    width: 174.997px;
    position: absolute;
    top: 0;
  }
  .jq-c {
    width: 846.998px;
    height: 567.998px;
    position: absolute;
    left: 300px;
    top: 90px;
  }
  .jq-h {
    position: absolute;
    bottom: 30px;
    left: 217.5px;
  }
  .wz-btn {
    width: 165.998px;
    height: 48.998px;
    position: absolute;
    right: 22.5px;
    bottom: 135px;
  }
  .lc {
    width: 281.002px;
    height: 276px;
  }
  .ys {
    width: 237.998px;
    height: 312.998px;
  }
  .jz {
    width: 260.002px;
    height: 261px;
    left: 307.5px;
  }
  .cf {
    width: 404.002px;
    height: 374.002px;
    left: 150px;
  }
  .qm {
    width: 207.998px;
    height: 263.002px;
    left: 255px;
  }
  .gy {
    width: 258.998px;
    height: 231.998px;
    left: 247.5px;
  }
  .iframe-video-box{
    height: 465px;
    width: 900px;
  }
  #wz-layer {
    overflow: hidden;
  }
  .layui-layer-setwin {
   
    width: 30px;
    height: 30px;
  }
  .layui-layer-setwin .layui-layer-close2 {
    
    z-index: 1111;
  }
  .layui-layer-rim {
    background: #000 !important;
  }

   /* 夏 */
   .xia-box {
    width: 9005.003px;
    /* height: 750px; */
    height: 100%;
    background: url(../img/xia-bg1.png) no-repeat left center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    z-index: 111;
    padding: 30px;
    padding-bottom: 0;
    box-sizing: border-box;
    /* display: flex; */
    align-items: center;
    display: none;
  }
  .xia-content {
    width: 8619.997px;
    height: 100%;
    max-height: 720px;
    background: url(../img/xia-bg2.png) no-repeat left center;
    background-size: 100% 100%;
    margin-left: -16.5px;
    display: flex;
  }
  .xia-shu {
    width: auto;
    height: 690px;
    margin-bottom: 30px;
    z-index: 1;
  }
  .lx {
    width: 261.998px;
    height: 260.002px;
  }
  .xm {
    width: 315px;
    height: 141px;
  }
  .mz {
    width: 270px;
    height: 350.002px;
  }
  .xz {
    width: 279.998px;
    height: 219px;
    left: 262.5px;
  }
  .xs {
    width: 246.998px;
    height: 366px;
    left: 240px;
  }
  .ds {
    width: 353.002px;
    height: 165.998px;
  }

  /* 秋 */
  .qiu-box {
    width: 9005.003px;
    /* height: 750px; */
    height: 100%;
    background: url(../img/qiu-bg1.png) no-repeat left center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    z-index: 111;
    padding: 30px;
    padding-bottom: 0;
    box-sizing: border-box;
    /* display: flex; */
    align-items: center;
    display: none;
  }
  .qiu-content {
    width: 8619.997px;
    height: 100%;
    max-height: 720px;
    background: url(../img/qiu-bg2.png) no-repeat left center;
    background-size: 100% 100%;
    margin-left: -16.5px;
    display: flex;
  }
  .qiu-shu {
    width: auto;
    height: 690px;
    margin-bottom: 30px;
    z-index: 1;
  }
  .lq {
    width: 210px;
    height: 315.998px;
    left: 187.5px;
  }
  .cs {
    width: 297.997px;
    height: 242.002px;
    left: 180px;
  }
  .bl {
    width: 332.002px;
    height: 291px;
    left: 150px;
  }
  .qf {
    width: 294.997px;
    height: 249px;
    left: 187.5px;
  }
  .hl {
    width: 222.997px;
    height: 359.002px;
    left: 247.5px;
  }
  .sj {
    width: 234px;
    height: 221.002px;
    left: 232.5px;
  }
  /* 冬 */
  .dong-box {
    width: 9005.003px;
    /* height: 750px; */
    height: 100%;
    background: url(../img/dong-bg1.png) no-repeat left center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    z-index: 111;
    padding: 30px;
    padding-bottom: 0;
    box-sizing: border-box;
    /* display: flex; */
    align-items: center;
    display: none;
  }
  .dong-content {
    width: 8619.997px;
    height: 100%;
    max-height: 720px;
    background: url(../img/dong-bg2.png) no-repeat left center;
    background-size: 100% 100%;
    margin-left: -16.5px;
    display: flex;
  }
  .dong-shu {
    width: auto;
    height: 690px;
    margin-bottom: 30px;
    z-index: 1;
  }
  .ld {
    width: 279px;
    height: 306.998px;
  }
  .xx {
    width: 276px;
    height: 285px;
    left: 150px;
  }
  .dx {
    width: 414px;
    height: 365.002px;
    left: 187.5px;
  }
  .dz {
    width: 324px;
    height: 240px;
  }
  .xh {
    width: 275.002px;
    height: 269.002px;
    left: 247.5px;
  }
  .dh {
    width: 375px;
    height: 183px;
    bottom: 90px;
  }