@charset "utf-8";
header .menu:hover .ico i:nth-child(1){ margin-left: -1rem}
header .menu:hover .ico i:nth-child(3){ margin-left: 0;}

footer:hover .gotop{ opacity: 1;}

.index .slide-arrow .arrow:hover{ transform: scale(2);}
@keyframes rotate{ 0% { transform: rotate(0) scale(.9); }  50% { transform: rotate(180deg) scale(1); }  100% { transform: rotate(360deg) scale(0.9); } }

.index .video:hover:before{ opacity: 0;}
.index .video:hover:after{ opacity: 0.5;}

.about .about-sub:hover i{ color: var(--light)}
.about .about-sub:hover .cn{ color: var(--light)}
.about .about-sub:hover .en{ color: var(--light); margin-bottom: 1vw;}
.about .about-sub:hover:after{ width: 100%; height: 50%; background: var(--primary);}

.about .about-cate:hover:after{ width: 9rem; height: 9rem; background: var(--primary);}
.about .about-cate:hover i{ color: var(--light)}
.about .about-cate:hover .cn{ color: var(--primary)}
.about .about-cate:hover .en{ color: var(--secondary)}

.advantage .taglist .itm:hover:after{ background: url('/public/static/index/img/ac-bg-h.svg') center top no-repeat var(--primary);}
.advantage .taglist .itm:hover .cn{ color: var(--light)}
.advantage .taglist .itm:hover .ico i{ color: var(--light)}
.advantage .taglist .itm:hover .ico span{ color: var(--light)}

.products .content .itms .product .itm .buy a:hover{ background: var(--primary);}

.products .content .itms .arrow:hover{ color: var(--light); background: var(--primary);}

.products .content .itms .list .itm:hover .thumb{ transform: translateY(-10px);}
.products .content .itms .list .itm:hover span,
.products .content .itms .list .itm:hover i{ font-weight: 700; color: var(--primary)}

.products .category .itm:hover{ padding: 1rem; background: var(--primary);}
.products .category .itm:hover .font .cn{ color: var(--light)}

.news .itm:hover .thumb .img{ transform: scale(1.05);}
.news .itm:hover .info{ background: var(--primary);}
.news .itm:hover .info:after{ background: var(--secondary);}
.news .itm:hover .info .font h1,
.news .itm:hover .info .font h5,
.news .itm:hover .info .font span{ color: var(--light)}
.news .itm:hover .info .date .box{ border-color: var(--secondary);}
.news .itm:hover .info .date .box b,
.news .itm:hover .info .date .box span{ color: var(--secondary)}

.environment:hover .itm .thumb:after{ opacity: 0.8;}
.environment:hover .itm:hover .thumb:after{ opacity: 0;}
.environment .itm:hover .thumb .img{ transform: scale(1.05);}

/* sub */
.topic-news .list:hover .slick-arrow:hover{ background: var(--secondary);}
.topic-news .list:hover .itm .thumb{ transform: scale(1.05);}
.topic-news .list:hover .itm .thumb:after{ width: 100%;}
.topic-news .list:hover .itm .info:after{ width: 100%;}
.topic-news .list:hover .itm .info .date,
.topic-news .list:hover .itm .info .title,
.topic-news .list:hover .itm .info .desc,
.topic-news .list:hover .itm .info .detail{ z-index: 1; color: #fff;}

.list-news .itm:hover .info{ transform: translateY(-18.25rem);}
.list-news .itm:hover .thumb{ transform: translateY(-18.25rem);}
.list-news .itm:hover .thumb:before{ opacity: 0;}
.list-news .itm:hover .thumb:after{ opacity: 1;}

.list-news .button:hover .next:after,
.list-news .button:hover .prev:after{ opacity: 0;}
.list-news .button .next:hover .ico{ transform: scale(1); height: 5vw;}

.list-news .button .next:hover,
.list-news .button .prev:hover{ height: 100%;}
.list-news .button .next:hover:after,
.list-news .button .prev:hover:after{ width: 100%; height: 100%; background: var(--primary); color: var(--light); opacity: 1;}
.list-news .button .next:hover .ico{ transform: scale(1); height: 5vw;}
.list-news .button .prev:hover .ico{ transform: scale(1); height: 5vw;}

.list-album .itm:hover .thumb .img{ transform: scale(1.05);}
.list-album .itm:hover .info{ background: var(--primary);}
.list-album .itm:hover .info .cn,
.list-album .itm:hover .info .cate{ color: var(--light);}

.products-column .content .category a:hover{ border-bottom-color: var(--primary); color: var(--primary); font-weight: 700;}

.products-column .content .more:hover:after{ width: 3rem; background: var(--primary);}
.products-column .content .more:hover:before{ height: 3rem; background: var(--primary); opacity: 1;}
.products-column .content .more:hover .font{ color: var(--primary); opacity: 0;}

.products-column .content .itm:hover .thumb:after{ height: 100%;background: var(--tertiary);}
.products-column .content .itm:hover .thumb img{ transform: scale(.9);}
.products-column .content .itm:hover .info{ color: var(--light)}
.products-column .content .itm:hover .info:after{ height: 100%;}
.products-column .content .itm:hover .info .line{ background: var(--light)}

.list-category a:hover{ color: var(--light); background: var(--primary);}

.list-product .itm:hover .thumb:after{ height: 100%;background: var(--tertiary);}
.list-product .itm:hover .thumb img{ transform: scale(.9);}
.list-product .itm:hover .info{ color: var(--light)}
.list-product .itm:hover .info:after{ height: 100%;}
.list-product .itm:hover .info .line{ background: var(--light)}

.pagination a:hover{ color: var(--light);}
.pagination a:hover:before{ height: 100%; opacity: 1;}
/* .pagination a:hover:after{ height: 50%; opacity: 1;} */
/* .pagination a.dis:hover{ color: var(--tertiary); background: none;} */


.list-contact .itm:hover:before{ width: 100%; height: 100%;}
.list-contact .itm:hover:after{ opacity: 0!important;}
.list-contact .itm:hover i{ font-size: 4rem; color: var(--light)}
.list-contact .itm:hover .en,
.list-contact .itm:hover .cn{ opacity: 0; display: none;}
.list-contact .itm:hover .hover:before{ content: attr(data-content);}