@charset "utf-8";
@import url('swiper.css');
:root {
--animate-duration:1s;
--animate-delay:1s;
--animate-repeat:1
}
.animate__animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-duration: var(--animate-duration);
	animation-duration: var(--animate-duration);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
.animate__animated.animate__infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}
.animate__animated.animate__repeat-1 {
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: var(--animate-repeat);
	animation-iteration-count: var(--animate-repeat)
}
.animate__animated.animate__repeat-2 {
	-webkit-animation-iteration-count: 2;
	animation-iteration-count: 2;
-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);
animation-iteration-count:calc(var(--animate-repeat)*2)
}
.animate__animated.animate__repeat-3 {
	-webkit-animation-iteration-count: 3;
	animation-iteration-count: 3;
-webkit-animation-iteration-count:calc(var(--animate-repeat)*3);
animation-iteration-count:calc(var(--animate-repeat)*3)
}
.animate__animated.animate__delay-1s {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-delay: var(--animate-delay);
	animation-delay: var(--animate-delay)
}
.animate__animated.animate__delay-2s {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
-webkit-animation-delay:calc(var(--animate-delay)*2);
animation-delay:calc(var(--animate-delay)*2)
}
.animate__animated.animate__delay-3s {
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
-webkit-animation-delay:calc(var(--animate-delay)*3);
animation-delay:calc(var(--animate-delay)*3)
}
.animate__animated.animate__delay-4s {
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
-webkit-animation-delay:calc(var(--animate-delay)*4);
animation-delay:calc(var(--animate-delay)*4)
}
.animate__animated.animate__delay-5s {
	-webkit-animation-delay: 5s;
	animation-delay: 5s;
-webkit-animation-delay:calc(var(--animate-delay)*5);
animation-delay:calc(var(--animate-delay)*5)
}
.animate__animated.animate__faster {
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-duration: calc(var(--animate-duration)/2);
	animation-duration: calc(var(--animate-duration)/2)
}
.animate__animated.animate__fast {
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
-webkit-animation-duration:calc(var(--animate-duration)*.8);
animation-duration:calc(var(--animate-duration)*.8)
}
.animate__animated.animate__slow {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
-webkit-animation-duration:calc(var(--animate-duration)*2);
animation-duration:calc(var(--animate-duration)*2)
}
.animate__animated.animate__slower {
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
-webkit-animation-duration:calc(var(--animate-duration)*3);
animation-duration:calc(var(--animate-duration)*3)
}
@media (prefers-reduced-motion:reduce), print {
.animate__animated {
	-webkit-animation-duration: 1ms!important;
	animation-duration: 1ms!important;
	-webkit-animation-iteration-count: 1!important;
	animation-iteration-count: 1!important;
	-webkit-transition-duration: 1ms!important;
	transition-duration: 1ms!important
}
.animate__animated[class*=Out] {
	opacity: 0
}
}
@-webkit-keyframes fadeInUp {
0% {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
to {
	opacity: 1;
	-webkit-transform: translateZ(0);
	transform: translateZ(0)
}
}
@keyframes fadeInUp {
0% {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
to {
	opacity: 1;
	-webkit-transform: translateZ(0);
	transform: translateZ(0)
}
}
.animate__fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp
}
@-webkit-keyframes zoomIn {
0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
50% {
opacity:1
}
}
@keyframes zoomIn {
0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
50% {
opacity:1
}
}
.home-banner #banner-swiper {
	height: 100%;
	min-height: 370px
}
.home-banner .swiper-pagination {
	display: block
}
.home-banner .swiper-slide {
	height: auto
}
.home-banner .swiper-slide a {
	display: block;
	width: 100%;
	height: 100%
}
.home-banner .swiper-slide a img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.home-banner .swiper-button-next, .home-banner .swiper-button-prev {
	background: 0 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fontcolor);
	transition: all .1s linear
}
.home-banner .swiper-button-next::after, .home-banner .swiper-button-prev::after {
	display: none
}
.home-banner .swiper-button-next:hover, .home-banner .swiper-button-prev:hover {
	background: var(--color);
	color: #FFFFFF
}
.home-banner .swiper-button-next i, .home-banner .swiper-button-prev i {
	font-size: var(--fontsize26)
}
.home-banner .swiper-button-next {
	right: 80px
}
.home-banner .swiper-button-prev {
	left: 80px
}
.home-banner .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
}
.home-banner .swiper-pagination-bullet-active {
	background: var(--color)
}
.home-banner .slide-pc, .home-banner .slide-pc img {
	display: block!important
}
.home-banner .slide-mb, .home-banner .slide-mb img {
	display: none!important
}
@media(max-width:768px) {
.home-banner .slide-pc, .home-banner .slide-pc img {
	display: none!important
}
.home-banner .slide-mb, .home-banner .slide-mb img {
	display: block!important
}
}
.home-service .service-wrap {
	max-width: 1600px;
	margin: 0px auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
}
.home-service .service-wrap .service-item {
	width: 25%;
	background: var(--hovercolor);
	color: #FFFFFF;
	border-right: 1px solid #FFFFFF35;
	padding: 60px 40px 50px;
	transition: all .2s linear;
	position: relative
}
.home-service .service-wrap .service-item:nth-child(4) {
	border-right: none
}
.home-service .service-wrap .service-item:hover {
	background: var(--color)
}
.home-service .service-wrap .service-item:hover .title::after {
	background: #FFFFFF
}
.home-service .service-wrap .service-item:hover .bg i {
	color: #FFFFFF
}
.home-service .service-wrap .service-item .title {
	font-size: var(--fontsize20);
	position: relative;
	padding-bottom: 8px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden
}
.home-service .service-wrap .service-item .title::after {
	content: "";
	width: 40px;
	height: 2px;
	background: var(--color);
	position: absolute;
	left: 0px;
	bottom: 0px
}
.home-service .service-wrap .service-item .text {
	padding-top: 25px;
	font-size: var(--fontsize16);
	line-height: 1.8;
	color: #EEEEEE;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden
}
.home-service .service-wrap .service-item .icon {
	margin-top: 20px
}
.home-service .service-wrap .service-item .icon i {
	font-size: var(--fontsize30)
}
.home-service .service-wrap .service-item .bg {
	position: absolute;
	right: 20px;
	bottom: 20px
}
.home-service .service-wrap .service-item .bg i {
	color: #FFFFFF35;
	font-size: 48px
}
.home-product .product-list {
	position: relative;
	padding: 0px 80px
}
.home-product .product-list .home-button-next, .home-product .product-list .home-button-prev {
	top: 30%
}
.swiper-pagination {
	display: none
}
.home-product .swiper .swiper-slide::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	background: var(--color);
	transition: all .2s linear
}
.home-product .swiper .swiper-slide:hover::after {
	height: 2px
}
.home-product .swiper .swiper-slide:hover .img img {
	transform: scale(1.1)
}
.home-product .swiper .swiper-slide .img {
	width: 100%;
	border: 1px solid #DFDFDF
}
.home-product .swiper .swiper-slide .img a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative
}
.home-product .swiper .swiper-slide .img a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .2s linear
}
.home-product .swiper .swiper-slide .info {
	padding: 20px 30px 30px 10px;
	width: 100%;
	position: relative
}
.home-product .swiper .swiper-slide .info .title {
	font-size: var(--fontsize18);
	color: var(--fontcolor);
	text-transform: capitalize
}
.home-product .swiper .swiper-slide .info .text {
	font-size: var(--fontsize14);
	color: var(--introcolor)
}
.home-product .swiper .swiper-slide .info i {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color);
	font-size: var(--fontsize20)
}
.home-button-next, .home-button-prev {
	position: absolute;
	left: 0px;
	top: 40%;
	background: 0 0;
	width: 40px;
	height: 40px;
	border: 1px solid #DFDFDF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all .2s linear;
	cursor: pointer
}
.home-button-next:hover, .home-button-prev:hover {
	background: var(--color);
	border-color: var(--color)
}
.home-button-next:hover i, .home-button-prev:hover i {
	color: #FFFFFF
}
.home-button-next i, .home-button-prev i {
	color: var(--fontcolor)
}
.home-button-next {
	left: auto;
	right: 0px
}
.home-application {
	background: #F9F9F9
}
.home-application .applist {
	padding: 0px 80px;
	position: relative
}
.home-application .applist .item {
	background: #FFFFFF;
	width: 100%;
	transition: all .1s linear;
	cursor: pointer;
	color: var(--fontcolor)
}
.home-application .applist .item:hover {
	background: var(--color);
	color: #FFFFFF;
	transform: scale(1.01)
}
.home-application .applist .item:hover .title::after {
	background: #FFFFFF
}
.home-application .applist .item .info {
	padding: 30px 20px
}
.home-application .applist .item .icon {
	line-height: 1
}
.home-application .applist .item .icon i {
	font-size: 44px
}
.home-application .applist .item .title {
	font-size: var(--fontsize18);
	padding: 10px 0px;
	position: relative
}
.home-application .applist .item .title::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 40px;
	height: 2px;
	background: var(--color)
}
.home-application .applist .item .pic img {
	width: 100%;
	height: auto
}
.home-video .videowrap {
	position: relative;
	padding: 0px 80px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
}
.home-video .videowrap .videoitem {
	background: #F8F8F8;
	transition: all .2s linear;
	margin-bottom: 20px;
	width: 23%
}
.home-video .videowrap .videoitem:hover {
	background: var(--color);
	color: #FFFFFF
}
.home-video .videowrap .videoitem:hover i {
	color: var(--color)
}
.home-video .videowrap .videoinner {
	position: relative;
	width: 100%
}
.home-video .videowrap .videoinner img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.home-video .videowrap .videoinner iframe, .home-video .videowrap .videoinner video {
	width: 100%;
	height: 100%
}
.home-video .videowrap .videoinner i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #FFFFFF;
	font-size: 40px;
	cursor: pointer
}
.home-video .videowrap .title {
	height: 50px;
	padding: 0px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center
}
.home-honor {
	background: url(../images/honor-bg.webp) no-repeat center;
	background-size: cover
}
.home-honor .honorwrap {
	position: relative;
	padding: 0px 80px
}
.home-honor .honorwrap .item {
	width: 100%;
	overflow: hidden;
	transition: all .2s linear
}
.home-honor .honorwrap .item:hover {
	transform: scale(1.05)
}
.home-honor .honorwrap .item img {
	width: 100%;
	height: 100%
}
.home-news .newswrap {
	position: relative;
	padding: 0px 80px;
	display: flex;
	flex-wrap: wrap
}
.home-news .newswrap .item {
	width: 23%;
	transition: all .2s linear;
	position: relative;
	margin-right: 2%
}
.home-news .newswrap .item:nth-child(4n) {
	margin-right: 0px
}
.home-news .newswrap .item .news-img img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.home-news .newswrap .item .news-info {
	padding: 20px 0px
}
.home-news .newswrap .item .news-info .title {
	font-size: var(--fontsize18);
	color: var(--fontcolor);
	font-weight: var(--fontbold5)
}
.home-news .newswrap .item .news-info .date {
	font-size: var(--fontsize14);
	color: var(--color);
	padding: 10px 0px
}
.home-news .newswrap .item .news-info .text {
	font-size: var(--fontsize14);
	color: var(--introcolor);
	line-height: 24px
}
.home-news .newswrap .item::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	background: var(--color);
	transition: all .2s linear
}
.home-news .newswrap .item:hover img {
	transform: scale(1.05)
}
.home-news .newswrap .item:hover::after {
	height: 2px
}
.home-about .l-wrap {
	padding: 0px 80px
}
.home-static .list {
	padding: 0px 50px
}
.home-static {
	position: relative;
	z-index: 1
}
.home-static::before {
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.1);
	z-index: -1
}
@media(max-width:1366px) {
.home-news .newswrap {
	padding: 0px
}
}
@media(max-width:1024px) {
.home-banner #banner-swiper {
	min-height: inherit
}
.home-service .service-wrap .service-item {
	width: 50%
}
.home-about .l-wrap {
	padding: 0px
}
.home-video .videowrap {
	padding: 0px
}
.home-static .list {
	padding: 0px
}
.home-video .videowrap .videoitem {
	width: 48%
}
.home-news .newswrap .item {
	width: 48%;
	margin-bottom: 20px;
	margin-right: 4%
}
.home-news .newswrap .item:nth-child(2n) {
	margin-right: 0px
}
}
@media(max-width:768px) {
.home-banner .swiper-button-next {
	right: 10px;
	width: 30px;
	height: 30px;
	display: none
}
.home-banner .swiper-button-prev {
	left: 10px;
	width: 30px;
	height: 30px;
	display: none
}
.home-about .about-info .home-title {
	text-align: center
}
.home-about .about-info .home-title-line {
	margin: 0px auto
}
.head-info {
	padding: 0px 15px
}
.home-application .applist, .home-honor .honorwrap, .home-product .product-list {
	padding: 0px
}
.home-application .applist .swiper, .home-honor .honorwrap .swiper, .home-product .product-list .swiper {
	padding-bottom: 40px
}
.home-button-next, .home-button-prev {
	width: 35px;
	height: 35px;
	background: #FFFFFF;
	display: none
}
.home-service .service-wrap .service-item {
	width: 100%;
	padding: 20px 15px 10px;
	border-bottom: 1px solid #333333;
	border-right: none
}
.home-service .service-wrap .service-item .text {
	padding-top: 15px;
	font-size: var(--fontsize14)
}
.home-service .service-wrap .service-item .icon {
	margin-top: 10px
}
.home-service .service-wrap .service-item .bg {
	bottom: 10px
}
.home-service .service-wrap .service-item .bg i {
	font-size: 40px
}
.home-product .swiper .swiper-slide .info {
	padding: 0px 30px 15px 10px;
	margin-top: 15px
}
.home-application .applist .item .info {
	padding: 15px
}
.home-application .applist .item .info .title {
	font-size: var(--fontsize16);
	font-weight: var(--fontbold5)
}
.home-application .applist .item .info i {
	font-size: 5.86667vw
}
.home-news .newswrap .item .news-info .title {
	font-size: var(--fontsize16);
	font-weight: normal
}
.home-news .newswrap .item .news-info .text {
	line-height: 20px;
	display: none
}
.swiper-pagination {
	display: block;
	bottom: 0!important
}
.swiper-pagination .swiper-pagination-bullet-active {
	background: var(--color)
}
.home-video .videowrap .videoitem {
	width: 100%
}
.home-product .swiper .swiper-slide .info .title {
	text-align: center;
	display: block
}
.home-product .swiper .swiper-slide .info .text {
	display: none
}
}
.banner-animote {
	position: absolute;
	top: 36%;
	left: 7%;
	z-index: 1;
	padding: 15px;
	border-radius: 10px;
	transform: translateY(20px);
	opacity: 0;
	text-transform: uppercase;
	font-weight: var(--fontbold7)
}
.swiper-slide-active .banner-animote {
	animation: bannerup 1s forwards
}
.banner-animote .title {
	font-size: 42px;
	color: #232323
}
.banner-animote .text {
	margin-top: 10px;
	max-width: 680px;
	color: var(--fontcolor)
}
@media(max-width:768px) {
.banner-animote {
	top: 20%;
	padding: 0px 15px;
	left: 0px;
	width: 100%
}
.banner-animote .title {
	font-size: var(--fontsize18)
}
.banner-animote .text {
	font-size: var(--fontsize14);
	margin-top: 5px;
	font-weight: normal;
	text-transform: capitalize
}
.banner-animote .btn {
	display: none
}
}
@keyframes bannerup {
0% {
transform:translateY(20px);
opacity:0
}
100% {
transform:translateY(0);
opacity:1
}
}