@charset "utf-8";

@media screen and (min-width:1024px){
  nav a{ transition: .3s;}
  .slideshow .swiper-button{ transition: .3s;}
  .slideshow .swiper-button.prev:hover{ left: 2.5rem;}
  .slideshow .swiper-button.next:hover{ right: 2.5rem;}

  .hotproduct .hot-arrow .prev,
  .hotproduct .hot-arrow .next{ transition: .3s;}
  .hotproduct .hot-arrow .prev:hover,
  .hotproduct .hot-arrow .next:hover{ border: 1px solid var(--secondary); background: var(--secondary);}
  .hotproduct .hot-arrow .prev:hover i,
  .hotproduct .hot-arrow .next:hover i{ color: var(--white)}

  .hotproduct .hot-thumb .itm.swiper-slide-thumb-active:after{ transition: .5s;}

  .about .slogan .subsection a,
  .about .slogan .subsection a:after{ transition: .3s;}
  .about .slogan .subsection a:hover{ padding-left: 1em;}
  .about .slogan .subsection a:hover:after{ width: 50%;}
  
  .about .information .more,
  .about .information .more:before{ transition: .3s;}
  .about .information .more:hover{ width: 20rem; color: var(--secondary)}
  .about .information .more:hover:before{ background:  var(--secondary);}

  .video .thumb:before{ transition: .3s;}
  .video .thumb:hover:before{ opacity: 1;}

  .area .area-font .point .itm .ico{ transition: .3s;}
  .area .area-font .point .itm:hover .ico,
  .area .area-font .point .itm.on .ico{ background: var(--primary);}

  .product .sec-content .itm .info .more,
  .product .sec-content .itm .info .more:before{ transition: .3s;}
  .product .sec-content .itm .info .more:hover{ width: 10rem; color: var(--secondary)}
  .product .sec-content .itm .info .more:hover:before{ background: var(--secondary);}

  .news .sec-content .list .itm .tit,
  .news .sec-content .list .itm .more,
  .news .sec-content .list .itm .more:after{ transition: .3s;}
  .news .sec-content .list .itm:hover .more:after{ padding-left: 2rem;}

  .news .sec-content .slide .itm .tit,
  .news .sec-content .slide .itm .more,
  .news .sec-content .slide .itm .more:after{ transition: .3s;}
  .news .sec-content .slide .itm:hover .more:after{ padding-left: 2rem;}

  .news .sec-content .slide .arrow .prev,
  .news .sec-content .slide .arrow .next{ transition: .3s;}
  .news .sec-content .slide .arrow .prev:hover,
  .news .sec-content .slide .arrow .next:hover{ background: var(--text);}

  .plant .sec-title .arrow .prev,
  .plant .sec-title .arrow .next{ transition: .3s;}
  .plant .sec-title .arrow .prev:hover,
  .plant .sec-title .arrow .next:hover{ border: 1px solid var(--secondary); background: var(--secondary);}
  .plant .sec-title .arrow .prev:hover i,
  .plant .sec-title .arrow .next:hover i{ color: var(--white)}
  
  .plant .plant-info .itm .more,
  .plant .plant-info .itm .more:before{ transition: .3s;}
  .plant .plant-info .itm .more:hover{ width: 100%; color: var(--secondary)}
  .plant .plant-info .itm .more:hover:before{ background: var(--secondary);}

  .pagination a{ transition: .3s;}
  .pagination a:hover{ background: var(--secondary);}
}