.cond {
    width:100%;
    height:500px;
    background:url(https://nfcms-mainsiteoss.188-5633.com/gddj/__tpl_asset/zt/img/20220322dj_mc_bg.jpg) center / cover no-repeat
  }




.condm {
  width:1400px;
  margin:0 auto;
  height:500px;
  position: relative;
}


.condm ul li { 
 position: absolute;
 color:#fff;
 display: flex;
 justify-content: center;
 align-items: center;
 font-weight:bold;
 padding: 10px;
 box-sizing: border-box;
 border-top-left-radius: 10px;
 border-bottom-right-radius: 10px;
 cursor: pointer;
 transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
}


.condm ul li:nth-child(even) {
  -webkit-animation: lianitc 7s linear infinite;
  -moz-animation: lianitc 7s linear infinite;
  -o-animation: lianitc 7s linear infinite;
  animation: lianitc 7s linear infinite;
}
.condm ul li:nth-child(odd) {
  -webkit-animation: lianitd 11s linear infinite;
  -moz-animation: lianitd 11s linear infinite;
  -o-animation: lianitd 11s linear infinite;
  animation: lianitd 11s linear infinite;
}

.condm ul li:nth-child(3n+1) {
  -webkit-animation: lianit 10s linear infinite;
  -moz-animation: lianit 10s linear infinite;
  -o-animation: lianit 10s linear infinite;
  animation: lianit 10s linear infinite;
}



.condm ul li:nth-child(2n+1) {
  -webkit-animation: lianitb 13s linear infinite;
  -moz-animation: lianitb 13s linear infinite;
  -o-animation: lianitb 13s linear infinite;
  animation: lianitb 13s linear infinite;
}


.condm ul li:nth-child(9) {
  -webkit-animation: lianitc 9s linear infinite;
  -moz-animation: lianitc 69s linear infinite;
  -o-animation: lianitc 9s linear infinite;
  animation: lianitc 9s linear infinite;
}
.condm ul li:nth-child(12) {
  -webkit-animation: lianit 7s linear infinite;
  -moz-animation: lianit 7s linear infinite;
  -o-animation: lianit 7s linear infinite;
  animation: lianit 7s linear infinite;
}

.condm ul li:nth-child(1) {
  -webkit-animation: lianitc 8s linear infinite;
  -moz-animation: lianitc 8s linear infinite;
  -o-animation: lianitc 8s linear infinite;
  animation: lianitc 8s linear infinite;
}
@-webkit-keyframes lianit {
 0% {
      -webkit-transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);;
    
  }

  50% {
      -webkit-transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 20, -40) scale(1) translateZ(0);
    
  }
  100%{
    -webkit-transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
  
}
}

@keyframes uptipsicon {
  0% {
    transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
  
}

50% {
   transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 20, -30) scale(1) translateZ(0);
  
}
100%{
  transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);

}
  
}

@-webkit-keyframes lianitb {
  0% {
       -webkit-transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
     
   }
 
   50% {
       -webkit-transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, -20, -50) scale(1) translateZ(0);
     
   }
   100%{
     -webkit-transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
   
 }
 }
 
 @keyframes uptipsiconb {
   0% {
     transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
   
 }
 
 50% {
    transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, -20, -50) scale(1) translateZ(0);
   
 }
 100%{
   transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
 
 }
   
 }



 @-webkit-keyframes lianitc {
  0% {
       -webkit-transform:translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
     
   }
 
   50% {
       -webkit-transform: translate3d(0, 0%, 0px) matrix(1, 0, 0, 1, 10, 30) scale(1) translateZ(0);
     
   }
   100%{
     -webkit-transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
 }
 }
 
 @keyframes uptipsiconc {
   0% {
     transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
   
 }
 
 50% {
    transform:  translate3d(0, 0%, 0px) matrix(1, 0, 0, 1, 10, 30) scale(1) translateZ(0);
   
 }
 100%{
   transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
 
 }
   
 }


 
 @-webkit-keyframes lianitd {
  0% {
       -webkit-transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
     
   }
 
   50% {
       -webkit-transform:  translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 30) scale(1) translateZ(0);
     
   }
   100%{
     -webkit-transform:translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
   
 }
 }
 
 @keyframes uptipsicond {
   0% {
     transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
   
 }
 
 50% {
    transform:  translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 30) scale(1) translateZ(0);
   
 }
 100%{
   transform: translate3d(0%, 0%, 0px) matrix(1, 0, 0, 1, 0, 0) scale(1) translateZ(0);
 
 }
   
 }

.condm ul li.cura {
   height:56px;
   background:#efad48;
   left: 260px;
   top: 50px;
   line-height: 36px;
   font-size: 20px;
}


.condm ul li:hover {
  box-shadow: 0px 0px 12px #8da9de;
  
}

.condm ul li a {
  color:#fff;
}
.condm ul li.curb {
  height:64px;
  background:#f3c042;
  left: 150px;
  top: 150px;
  line-height: 64px;
  font-size: 36px;
}


.condm ul li.curc {
  height:63px;
  background:#8bbd52;
  left: 200px;
  top: 400px;
  line-height: 63px;
  font-size: 36px;
}


.condm ul li.curd {
  height:41px;
  background:#5a7dac;
  left: 260px;
  top: 300px;
  line-height: 41px;
  font-size: 23px;
}



.condm ul li.cure {
  height:50px;
  background:#efad48;
  left: 600px;
  top: 50px;
  line-height: 36px;
  font-size: 20px;
}
.condm ul li.curf {
  height:41px;
  background:#71a2e6;
  left: 820px;
  top: 100px;
  line-height: 41px;
  font-size: 23px;
}



.condm ul li.curg {
  height:32px;
  background:#8bbd52;
  left: 700px;
  top: 350px;
  line-height: 32px;
  font-size: 22px;
}

.condm ul li.curh {
  height:53px;
  background:#71a2e6;
  left: 900px;
  top: 200px;
  line-height: 53px;
  font-size: 30px;
}


.condm ul li.curi {
  height:50px;
  background:#7ec2b8;
  left: 800px;
  top: 400px;
  line-height: 50px;
  font-size: 28px;
}


.condm ul li.curj {
  height:84px;
  background:#ac5a5a;
  left: 500px;
  top: 200px;
  line-height: 84px;
  font-size: 47px;
}

/* 暂未使用 仅用上方10个 */
.condm ul li.curk {
  width:247px;
  height:63px;
  background:#cc8138;
  left: 0;
  top: 0;
  line-height: 63px;
  font-size: 36px;
}

.condm ul li.curl {
  width:140px;
  height:42px;
  background:#7ec2b8;
  left: 274px;
  top: 635px;
  line-height: 42px;
  font-size: 26px;
}

.condm ul li.curm {
  width:125px;
  height:34px;
  background:#cc8138;
  left: 584px;
  top: 258px;
  line-height: 34px;
  font-size: 22px;
}



.condm ul li.curn {
  width:126px;
  height:41px;
  background:#5a7dac;
  left: 726px;
  top: 132px;
  line-height: 41px;
  font-size: 22px;
}


.condm ul li.curo {
  width:247px;
  height:63px;
  background:#7ec2b8;
  left: 827px;
  top: 247px;
  line-height: 63px;
  font-size: 36px;
}
.condm ul li.curp {
  width:138px;
  height:41px;
  background:#71a2e6;
  left: 837px;
  top: 353px;
  line-height: 41px;
  font-size: 23px;
}



.condm ul li.curq {
  width:308px;
  height:79px;
  background:#8bbd52;
  left: 812px;
  top: 462px;
  line-height: 79px;
  font-size: 44px;
}



.condm ul li.curr {
  width:117px;
  height:41px;
  background:#e7a99b;
  left: 711px;
  top: 610px;
  line-height: 41px;
  font-size: 23px;
}

.condm ul li.curs {
  width:133px;
  height:47px;
  background:#f3c042;
  left: 650px;
  top: 714px;
  line-height: 47px;
  font-size: 27px;
}




.condm ul li.curt {
  width:145px;
  height:45px;
  background:#ac5a5a;
  left: 1000px;
  top: 89px;
  line-height: 45px;
  font-size: 25px;
}


.condm ul li.curu {
  width:199px;
  height:51px;
  background:#5a7dac;
  left: 1108px;
  top: 225px;
  line-height: 51px;
  font-size:29px;
}



.condm ul li.curv {
  width:133px;
  height:47px;
  background:#f3c042;
  left: 1134px;
  top: 350px;
  line-height: 47px;
  font-size: 27px;
}
.condm ul li.curz {
  width:125px;
  height:34px;
  background: #cc8138;
  left: 895px;
  top: 657px;
  line-height: 34px;
  font-size:22px;
}


.condm ul li.curw {
  width:135px;
  height:34px;
  background:#cc8138;
  left: 1160px;
  top: 488px;
  line-height: 34px;
  font-size: 22px;
}


.condm ul li.curx {
  width:128px;
  height:41px;
  background:#5a7dac;
  left: 1076px;
  top: 590px;
  line-height: 41px;
  font-size: 23px;
}


.condm ul li.cury {
  width:80px;
  height:32px;
  background:#8bbd52;
  left: 1200px;
  top: 713px;
  line-height: 32px;
  font-size: 22px;
}