h3{

  font-family: "SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;

}

p{

  font-family: "SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;

}

.white{

  color: #ffffff;

}

.black{

  color: #000;

}

.more{

  position: absolute;

  top: 135px;

  width: 100%;

  text-align: center;

}

.more a{

  font-size: 20px;

  line-height: 35px;



  margin-right: 20px;

    margin-left: 20px;

    text-align: center;

}

.title{

  width: 100%;

  text-align: center; 

  position: absolute;

  margin-top: 3%;

  z-index: 3;

}

.title h3{

   font-size: 65px;

}

.title h3 span{

  color: rgb(161, 0, 0);

}

.title p{

  font-size: 20px;

}

.ubox img{

  width: 18%;



}

.ubox{

  width: 100%;

  text-align: center; 

  position: absolute;

  top: 300px;

  z-index: 3;

}

.uprob{

  width: 100%;

  text-align: center; 

  position: absolute;

  top: 400px;

  z-index: 3;

}

.upad4{

  width: 100%;

  text-align: center; 

  position: absolute;

  top: 280px;

  z-index: 3;

}



 .list{ list-style:none; padding:0; margin:0; }

 .list li{ position: relative; overflow: hidden;}

 

 .list li div{ opacity:0; animation:move 2s forwards; animation-play-state:paused; }

 .list .move{ animation-play-state:running;margin-top: 5%;}

    @media screen and (min-width: 200px) and (max-width: 700px){
        .ubox11 img{
            width: 45%;
        }
        
        .list .move {
 
            margin-top: 13%;
        }
        .list li {
            height: 450px;
        }
        
    }
 @keyframes move{

 from{ opacity:0;       transform: translateY(50%);}

 to{ opacity:1;       transform: translateY(0%);}

 

 }







 .box.title p{

  width: 0%;

  transition: width 1s ease;



 }

 .box.title h3{

  width: 0%;

  transition: width 1s ease;

 }

 .box.show.title{

  width: 20%;

  transform: translateY(0%);

  opacity: 1;

 }

 .box.show img{



  width: 20%;

 }

 

 .slider-content a{

    color: #ffffff;

    font-size: 1.5rem;

 }



 

 .slider-area{

     cursor: pointer;

     transform: scale(1);

     opacity: 1;

 }

 .slider-area:hover{

   /* transform: scale(1.06);

     transition: all .3s ease;

     opacity: 1; */

 }

 .single-slider .slider-content-lf{

     text-align: center;

     max-width: 74%;

     margin-left: auto;

     margin-top: 20%;

 }

 .slider-content-lf a {

     color: #000;

     font-size: 1.5rem;

     margin-top: 10px;

 }

 .slider-content-lf a:hover {

     color: #ffffff;

     background-color: #000;

 }

 

 

 .animation{

     width: 29%;

     position: absolute;

     top: 14%;

     right: 31%;

 }

 .animation1{

   width: 100%;

  position: absolute;

  top: 50%;

}

#ubox9{

  width: 26%;

    margin: 0 auto;

}



 .title1 {

    position: absolute;

    top: 58%;

    right: 65%;

}

.title2 {

  width: 100%;

  position: absolute;

  top: 10%;

  text-align: center;

}



.title1 a{

  color: #ffffff;

    font-size: 25px;

}

.title2 h3{

  font-size: 65px;

  color: #ffffff;

}

 



 .animation {

     animation: animation 2s ease;

     animation-fill-mode : forwards;/*保持结束位置*/

 }

 #phone{

    display:none ;

}

.box1 .box_lf{

    width: 1290px;

}

.box1 .box_rg{

  width: 500px;

}



.box1 .box_rg:hover{

  /* transform: scale(1.06);

    transition: all .3s ease;

    opacity: 0.9; */

}





.help{

    position: absolute;

    bottom: 25px;

    color: #ffffff;

    text-align: center;

    padding: 0% 20%;

}



#canv{

  width: 100%;

  height: 700px;

}

.first-image{

  width: 100%;

}





#canvas{

  height: 900px;

  width: 100%;

}









.list a:hover{

  color: rgb(46, 109, 190);

}

 @media screen and (min-width: 200px) and (max-width:700px) {

  .white{

    color: #ffffff;

  }

  .black{

    color: #000;

  }

   .more{

    z-index: 3;

    position: absolute;

    top: 100px;

    width: 100%;

    text-align: center;

   

   }

   .more a{

    font-size: 14px;

   }

  #canvas{

    height: 375px;

    width: 100%;

  }

  .ubox{

    width: 100%;

    text-align: center; 

    position: absolute;

    top: 46%;



  }

  .uprob{

    width: 100%;

    text-align: center; 

    position: absolute;

    top: 60%;

  }

  .upad4{

    width: 100%;

    text-align: center; 

    position: absolute;

    top: 45%;

  }

  .ubox img{

   width: 33%;

  }

  .uprob img{

    width: 50%;

  }

  .upad4 img{

  width: 40%;

  }





  .list li>img{ 

    height:375px; 

    position: relative;

    object-fit: cover;

    width: 100%;

    /* object-position: right center; */

  }

  .title h3{

    font-size: 40px;

 }

 .title h3 span{

   color: rgb(161, 0, 0);

 }

 .title p{

   font-size: 14px;

 }





  .title2 h3 {

    font-size: 40px;

    color: #ffffff;

}



#ubox9 {

  width: 61%;

  margin: 0 auto;

}

  #canv{

    width: 100%;

    height: 375px;

  }

   .mimg{

    height: 200px;

    object-fit: cover;

   }

   .slider-area {

    margin-bottom: 0em;

}

.box2 {



  margin-bottom: 0em;

}

.box_lf {

  margin-bottom: 0em;

}

.box_rg {

  margin-bottom: 0em;

}

  .box1 .box_lf{

    width: 100%;

}

.box1 {



  margin-bottom: 0em;

}

.help {

  position: absolute;

  bottom: 7px;

  color: #ffffff;

  text-align: center;

  padding: 0% 15%;

}

.box1 .box_rg{

  width: 100%;

}

    #pc{

        display:none;

    }

    #phone{

        display:block;

    }

    .animation {

        width: 39%;

        position: absolute;

        top: 23%;

        right: 18%;

    }



   

 }







 @media only screen and (min-width:768px) and (max-width:1200px){

  #ubox9 {

    width: 34%;

    margin: 0 auto;

}

#canv {

  width: 100%;

  height: 500px;

}

.uprob img{

   width: 34%;

}

.upad4 img{

  width: 34%;

}

.first-image{

  width: 170%;

  left: -70%;

  overflow: hidden;

}

 }