@charset "utf-8";


/*    solgan*/
.bannar {
    max-width: 2560px;
    width: 79.5vw;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    margin: 0 auto!important;
}

#myVideo{width: 80vw;height: auto;opacity: 1;margin-top: auto;filter:brightness(0.8)}

.sjslogan{display: none;}
#slogan1 {
position: absolute;
  left: -50VW;
  right: 0;
  top: 50%;
  transform: translate3d(0%, -50%, 0);
  text-align: center;
  color: #FFF;
  z-index: 2;
  font-size: 3vw;
  font-weight: 500;
  line-height:4.5vw;
    white-space: nowrap;
    width: 50%;
    margin: auto;
/*    overflow: hidden;*/

}


#slogan1:hover {
  font-weight: 600;
}

.slogan1{ opacity: 1;position: relative;
  animation:fade-in1 1.5s  forwards;}
  
  @keyframes fade-in1 {
  from {
  top: 1vw;
    opacity: 0;
  }
  to {
   top: 0vw;
    opacity: 1;
  }}
  
  
  .slogan2{ opacity: 0;position: relative;
  animation:fade-in2 2s  forwards;}
  @keyframes fade-in2 {
  from {
    top: 1.5vw;
    opacity: 0;
  }
  to {
 top: 0vw;
    opacity: 1;
  }}
  
  .slogan3{ opacity: 0;position: relative;
  animation:fade-in3 2.5s  forwards;}
  @keyframes fade-in3 {
  from {
 top: 2vw;
    opacity: 0;
  }
  to {
 top: 0vw;
    opacity: 1;
  }}
  
/*project*/

.project-body{max-width: 2560px!important;
    margin: 0 auto;
    margin-top: 5vw;
    float: none!important;
    width: 80%;
    display: block;
    position: relative; }
   

.project{display:block;  width: 100%;position: relative;}


.imgtext1{
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 6;
    line-height: 25px;}

    .imgtext2{
      position: absolute;
      top: 50%;
      left: 75%;
      transform: translate(-50%, -50%);
      text-align: center;
      opacity: 0;
      transition: opacity 0.5s;
      z-index: 6;
      line-height: 25px;}

.imgtext1 p,.imgtext2 p {font-size: 30px;font-weight: 400;letter-spacing: 3px;color:#fff;}

.project-1{width: 48%;float: left;overflow:hidden;}
.project-2{width: 48%;float: right;overflow:hidden;}

.project-body img{
  width: 100%;height: auto;margin:auto; display:block;

  animation: motion1 2s cubic-bezier(.5, 0, 0, 1) forwards;
  transition: filter 0.5s ;
  transition: transform 2s; transform-origin: center center; } 
 
  
  .project{    transition: transform 1s; /* 设置动画过渡时间为1秒 */
  }
  
  /* 初始状态下，图片不移动 */
  .moved-up {
    transform: translateY(-50px); /* 向上移动30px */
  }


  
  @keyframes motion1 {
  from{top:40px;
  
  }to{top:0px;}
  }


.project{display: block; 
    position: relative;
    width: 100%;overflow: hidden;
    margin-bottom: 3vw;}




.project-1:hover img{filter: brightness(80%);transform: scale(1.1);}
.project-2:hover img{filter: brightness(80%);transform: scale(1.1);}

.project-1:hover .imgtext1{opacity: 1;}
.project-2:hover .imgtext2{opacity: 1;}






@media (max-width:768px) {


.bannar{opacity: 1;width: 90vw;position: relative;}
.sjslogan{ 
  display:block;
  position: relative;
  opacity: 1;
float: left;
 
  top: 50%;
margin-top: 5vw;
  color: #000000;
  z-index: 2;
  font-size: 10vw;
  font-weight: 500;
  line-height:14vw;
    white-space: nowrap;
    width: 100%;
    font-weight: 600;
   }

/*project*/
#myVideo,#slogan1{opacity: 0;position: absolute;}

.project-body{max-width: 2560px;
  margin: 0 auto;
  margin-top: 5vw;
  float: none!important;
  width: 90%;
  display: block;
  position: relative; }
 



  
.project{display:block;  width: 100%;position: relative;margin-bottom: 3vw;}


.imgtext1{
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 6;
  line-height: 25px;}

  .imgtext2{
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 6;
    line-height: 13px;}

.imgtext1 p,.imgtext2 p {font-size: 10px;font-weight: 400;letter-spacing: 2px;color:#fff;}

.project-1{width: 100%;margin: auto;overflow:hidden;margin-bottom: 3vw;}
.project-2{width: 100%;margin: auto;overflow:hidden;}

.project-body img{
width: 100%;height: auto;margin:auto; display:block;

animation: motion1 2s cubic-bezier(.5, 0, 0, 1) forwards;
transition: filter 0.5s ;
transition: transform 2s; transform-origin: center center; } 


.project{    transition: transform 1s; /* 设置动画过渡时间为1秒 */
}

/* 初始状态下，图片不移动 */
.moved-up {
  transform: translateY(0px); /* 向上移动30px */
}



@keyframes motion1 {
from{top:0px;

}to{top:0px;}
}





.project-1:hover img{filter: brightness(80%);transform: scale(1.1);}
.project-2:hover img{filter: brightness(80%);transform: scale(1.1);}

.project-1:hover .imgtext1{opacity: 1;}
.project-2:hover .imgtext2{opacity: 1;}

}