@font-face {
  font-family: "iconfont"; /* Project id 4534573 */
  src: url('../font/font_4534573_gndmqbzisp6.woff2') format('woff2'),
       url('../font/font_4534573_gndmqbzisp6.woff') format('woff'),
       url('../font/font_4534573_gndmqbzisp6.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-xinlangweibo:before {
  content: "\e600";
}

.icon-weixin:before {
  content: "\e601";
}

.icon-douyin:before {
  content: "\e8db";
}

.icon-shipinhao:before {
  content: "\e623";
}

.icon-xiaohongshu:before {
  content: "\e864";
}

.icon-youjt:before {
  content: "\eb08";
}

.icon-sousuo:before {
  content: "\e60f";
}

.icon-ll:before {
  content: "\e902";
}

.icon-icon:before {
  content: "\e643";
}

.icon-jtr:before {
  content: "\e63a";
}

.icon-rr:before {
  content: "\e904";
}

.icon-jtl:before {
  content: "\e869";
}


@font-face {
  font-family: "iconfont"; /* Project id 4534573 */
  src: url('../font/font_4534573_gndmqbzisp6.woff2') format('woff2'),
       url('../font/font_4534573_gndmqbzisp6.woff') format('woff'),
       url('../font/font_4534573_gndmqbzisp6.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-xinlangweibo:before {
  content: "\e600";
}

.icon-weixin:before {
  content: "\e601";
}

.icon-douyin:before {
  content: "\e8db";
}

.icon-shipinhao:before {
  content: "\e623";
}

.icon-xiaohongshu:before {
  content: "\e864";
}

.icon-youjt:before {
  content: "\eb08";
}

.icon-sousuo:before {
  content: "\e60f";
}

.icon-ll:before {
  content: "\e902";
}

.icon-icon:before {
  content: "\e643";
}

.icon-jtr:before {
  content: "\e63a";
}

.icon-rr:before {
  content: "\e904";
}

.icon-jtl:before {
  content: "\e869";
}

.im{

  width: 150px;
  padding-top: 40px;
  width: 150px;
}




@media screen and (min-width:780px){



  .c22 images{

    width:80px;
   height: 66px;
   margin-top: 5px;
   
  }

  .max1 {


    width: 100%;
    height: 60px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;


  }


  .c11 images{

    width:150px;
    animation-name: mmo; 
    animation-duration:3s ; 
    animation-timing-function: ease; 
    animation-delay: 0.5s; 
    animation-fill-mode:forwards ;
    margin-top: 0px;
   
  }


  @keyframes mmo{ 0%{
  
  }
  
  50%{
    margin-top: -100px;
  }
  
  100%{
  
    margin-top: -100px;
  }
  }

  
  .c33 images{

    width:150px;
    animation-name: mmmo; 
    animation-duration:3s ; 
    animation-timing-function: ease; 
    animation-delay: 0.5s; 
    animation-fill-mode:forwards ;
    margin-top: 0px;
   
  }


  @keyframes mmmo{ 0%{
  
  }
  
  50%{
    margin-top: 120px;
  }
  
  100%{
  
    margin-top: 120px;
  }
  }




.num{
   width: 100%;
   margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.max{

  width: 280px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.max li{

  height: 27px;
}

.none li:nth-child(3) {

  width:50px;
  animation-name: moo; 
  animation-duration:3s ; 
  animation-timing-function: ease; 
  animation-delay: 1s; 
  animation-fill-mode:forwards ;
  margin-top: 35px;
  background: url(../image/33.png) no-repeat;
  background-size: 50px 25px;


}
.none li:nth-child(1) {

  width:50px;
  animation-name: mo; 
  animation-duration:3s ; 
  animation-timing-function: ease; 
  animation-delay: 1s; 
  animation-fill-mode:forwards ;
  margin-top: -35px;
  background: url(../image/11.png) no-repeat;
  background-size: 50px 25px;


}
header  li:nth-child(2)   {

  width: 19px;
        background: url(../image/2.png) no-repeat;
        background-size: 19px 26px;

}

.none  li:nth-child(2)   {

  width: 16px;
        background: url(../image/22.png) no-repeat;
        background-size: 16px 23px;

}

header  li:nth-child(1)   {

  width:50px;
  animation-name: move; 
  animation-duration:7s ; 
  animation-timing-function: ease; 
  animation-delay: 1s; 
  animation-fill-mode:forwards ;
  margin-top: -35px;
  background: url(../image/1.png) no-repeat;
  background-size: 50px 25px;

}

.c2 images{

  width:25px;
  height: 25px;
}

header  li:nth-child(3) {


  width:50px;
  animation-name: mov; 
  animation-duration:7s ; 
  animation-timing-function: ease; 
  animation-delay: 1s; 
  animation-fill-mode:forwards ;
  margin-top: 35px;
  background: url(../image/3.png) no-repeat;
  background-size: 50px 25px;
}

  
@keyframes mo{ 0%{
  
}

50%{
  margin-top: 0px;
}

100%{

  margin-top: 0px;
}
}


@keyframes move{ 0%{
  
  }
  
  50%{
    margin-top: 0px;
  }
  
  100%{
  
    margin-top: 0px;
  }
  }


  @keyframes mov{ 0%{
  
  }
  
  50%{
    margin-top: 0px;
  }
  
  100%{
  
    margin-top: 0px;
  }
  }

  @keyframes moo{ 0%{
  
  }
  
  50%{
    margin-top: 0px;
  }
  
  100%{
  
    margin-top: 0px;
  }
  }



}



@media screen and (max-width:769px){


  header  li:nth-child(1)   {

    width:50px;
  
    background: url(../image/11.png) no-repeat;
    background-size: 50px 25px;
  
  }

  header  li:nth-child(2)   {

    width:14px;
    background: url(../image/22.png) no-repeat;
    background-size: 14px 23px;
  
  }

  header  li:nth-child(3) {


    width:50px;
    background: url(../image/33.png) no-repeat;
    background-size: 50px 25px;
  }
  .max1 {


    width: 100%;
    height: 60px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 100px;


  }


  .c11 images{

    width:150px;
    animation-name: mmo; 
    animation-duration:3s ; 
    animation-timing-function: ease; 
    animation-delay: 0.5s; 
    animation-fill-mode:forwards ;
    margin-top: 0px;
   
  }

  .c22 images{

    width:40px;
   height: 70px;
   
  }


  .c33 images{

    width:150px;
    animation-name: mmmo; 
    animation-duration:3s ; 
    animation-timing-function: ease; 
    animation-delay: 0.5s; 
    animation-fill-mode:forwards ;
    margin-top: 0px;
   
  }

  @keyframes mmo{ 0%{
  
  }
  
  50%{
    margin-top: -100px;
  }
  
  100%{
  
    margin-top: -100px;
  }
  }

  @keyframes mmmo{ 0%{
  
  }
  
  50%{
    margin-top: 120px;
  }
  
  100%{
  
    margin-top: 120px;
  }
  }


  .num{
    width: 100%;
    margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .max{

  
  height: 60px;
  display: flex;
  justify-content: left;
  align-items: center;
}
.max li{

  height: 27px;
}

.c1 images{

  width:12vw;
}

.c2 images{

  width:6vw;
  height: 6vw;
}

.c3 images{

  width:12vw;
}
  }