@media screen and (min-width:1024px){
  .colorcate .link a:hover{ background: var(--secondary); color: var(--white)}

  .about .details:hover{ background: var(--primary);}

  @keyframes ud{ 0% { top: 0; } 25% { top: -1rem; } 50% { top: 0rem; } 75% { top: 1rem; } }
  .product .content .swiper-container .itm:hover .cover{ animation: ud 1.5s linear infinite;}
  .product .content .swiper-container .itm:hover .info{ background: url('../image/ico-w.svg') right 1.25rem bottom 1.25rem no-repeat  var(--primary); }
  .product .content .swiper-container .itm:hover .info .title{ color: var(--white)}
  .product .content .swiper-container .itm:hover .info .cate{ color: var(--white)}

  .product .content .control .swiper-button div:hover i{ color: var(--secondary)}
  
  .product .content .control .category a:hover{ font-weight: bold;}

  .news .content .itm:first-child:hover{ padding-top: 4.25vw;}
  .news .content .itm:first-child:hover .tit{ color: var(--primary); font-weight: bold;}

  .news .content .itm:not(:first-child):hover{ padding-top: 4.25vw; background: var(--primary); mix-blend-mode: multiply;}
  .news .content .itm:not(:first-child):hover .day{ color: var(--white)}
  .news .content .itm:not(:first-child):hover .my{ color: var(--white)}
  .news .content .itm:not(:first-child):hover .tit{ color: var(--white)}
  .news .content .itm:not(:first-child):hover .desc{ color: var(--white)}
  .news .content .itm:not(:first-child):hover .details{ color: var(--white)}
  .news .content .itm:hover .cover img{ transform: scale(1.1);}


  /* sub */
  .about-grid .row-2 .content .itm:hover{ top: -1rem; background: var(--primary);}
  .about-grid .row-2 .content .itm:hover .en{ color: var(--secondary)}
  .about-grid .row-2 .content .itm:hover .info .cn,
  .about-grid .row-2 .content .itm:hover .info .font{ color: var(--white)}
  .about-grid .row-2 .content .itm:hover .info .line{ background: var(--white);}
  
  .about-grid .row-3 .grid .title .button div:hover{ background: var(--text);}
  .about-grid .row-3 .grid .content .itm:hover a:after{ opacity: 0;}
  .about-grid .row-3 .grid .content .itm:hover a img{ transform: scale(1.1);}
  .about-grid .row-3 .grid .content .itm.swiper-slide-active:hover a .info{ opacity: 1; background: var(--primary); color: var(--white)}

  .about-grid .row-4 .content .itm:hover a{ top: -1rem; -webkit-box-reflect: below 0 -webkit-linear-gradient( transparent,transparent 95%,rgba(255,255,255,.2))}

  .about-grid .row-5 .content .itm:hover{ top: -1rem; box-shadow: 0 .5rem .5rem rgba(0,0,0,.2)}

  .product-grid .slide .itm:hover .tit{ color: var(--primary)}
  .product-grid .slide .itm:hover .cover img{ transform: translateY(-1rem);}

  .product-grid .row .itm:hover{ top: -1rem; background: var(--primary);}
  .product-grid .row .itm:hover .info .en{ background-image:-webkit-linear-gradient(var(--white) 50%, var(--white) 50%)!important; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
  .product-grid .row .itm:hover .info .cn{ color: var(--white)}
  .product-grid .row .itm:hover .box .info .more{ background: var(--white);}
  .product-grid .row .itm:hover .box .info .more>*{ color: var(--primary)!important}
  .product-grid .row .itm:hover .box .cover img{ transform: translateY(1rem);}

  .detect-grid .row .title .more:hover{ padding: 0 2.5rem;}
  .detect-grid .row .title .prev:hover,
  .detect-grid .row .title .next:hover{ background: var(--text)!important;}

  .detect-grid .row .swiper-container .itm:hover .cover img{ transform: scale(1.05);}
  .detect-grid .row .swiper-container .itm:hover .info{ background: var(--secondary); color: var(--white); font-weight: bold;}

  .news-grid .col .content .itm:hover{ background: var(--primary);}
  .news-grid .col .content .itm:hover .cover{ opacity: 1;}
  .news-grid .col .content .itm:hover>*{ color: var(--white)!important}
  .news-grid .col .content .itm:hover .line{ background: var(--white);}

  .news-grid .col:last-child .content .itm:hover{ background: var(--secondary);}

  .news-grid .col .more:hover{ width: 20rem;}

  .contact-grid .itm:hover .info{ background: var(--text);}

  .list-honor .itm:hover{ top: -1rem;}
  .list-honor .itm:hover .info{ color: var(--primary); font-weight: bold;}
  .list-honor .itm:hover .more{ color: var(--secondary);}
  .list-honor .itm:hover .more:after{ background: var(--secondary);}

  .list-album .itm:hover{ top: -1rem;}
  .list-album .itm:hover .cover img{ transform: scale(1.05);}
  .list-album .itm:hover .info{ color: var(--primary); font-weight: bold; background: var(--white);}
  .list-album .itm:hover .more{ opacity: 0;}

  .list-product .itm:hover{ top: -1rem;}
  .list-product .itm:hover .cover{ background: var(--white);}
  .list-product .itm:hover .cover:after{ bottom: 50%; background: var(--primary);}
  .list-product .itm:hover .info{ padding: 1em; background: var(--white);}
  .list-product .itm:hover .info b{ color: var(--primary); font-weight: bold;}
  .list-product .itm:hover .more{ opacity: 0;}

  .list-news .itm:hover{ top: -1rem; background: var(--primary);}
  .list-news .itm:hover .cover{ opacity: 1;}
  .list-news .itm:hover>*{ color: var(--white)!important}
  .list-news .itm:hover .line{ background: var(--white);}

  .project-grid .itm:hover .cover img{ transform: scale(1.05);}
  .project-grid .itm:hover .info{ background: var(--primary);}
  .project-grid .itm:hover .info .tit{ color: var(--white); font-weight: bold;}
  .project-grid .itm:hover .info .date{ color: var(--white);}
  .project-grid .itm:hover .info .more{ background: var(--secondary);}
}