#index-banner{width: 100%;}
.index-banner-box{overflow: hidden;position: relative;width: 100%;}
.index-banner-box ul li{width: 100%;}
.index-banner-box ul li img{width: 100%;display: block;}
#index-banner .index-banner-pagination{position: absolute;bottom: 40px;right: 80px;z-index: 1;text-align: right;left: auto;}
#index-banner .index-banner-pagination span{height: 32px;width: 32px;background: none;border: 1px solid #000;box-sizing: border-box;margin: 0 5px;opacity: 1;}
#index-banner .index-banner-pagination span.swiper-pagination-bullet-active{background: #000;}
#index-product{width: 100%;padding: 60px 0;background: #F1F1F1;}
.sec-title{text-align: center;}
.sec-title h2{font-size: 40px;font-weight: bold;color: #FFFFFF;line-height: 80px;font-weight: bold;padding: 0 50px;box-sizing: border-box;display: inline-block;background: #303030;}

.index-hot-pro{width: 100%;margin-top: 50px;}
.index-hot-pro ul{column-count: 3;column-gap: 30px;}
.index-hot-pro ul li{width: 100%;break-inside: avoid;box-sizing: border-box;margin-top: 0 !important;}
.index-hot-pro ul li .index-pro-img{width: 100%;overflow: hidden;}
.index-hot-pro ul li .index-pro-img img{width: 100%;display: block;transition: .5s;}
.index-hot-pro ul li:hover .index-pro-img img{transform: scale(1.2);}
.index-pro-list{width: 100%;margin-top: 50px;position: relative;}
.index-pro-swiper{width: 100%;overflow: hidden;}
.index-pro-swiper ul li{width: 100%;box-sizing: border-box;}
.index-pro-swiper ul li .index-pro-img{width: 100%;overflow: hidden;box-sizing: border-box;}
.index-pro-swiper ul li .index-pro-img img{width: 100%;display: block;transition: .5s;}
.index-pro-swiper ul li:hover .index-pro-img img{transform: scale(1.2);}
.index-pro-notification i{position: absolute;top: 50%;transform: translateY(-50%);height: 40px;width: 40px;line-height: 40px;text-align: center;font-size: 30px;box-sizing: border-box;cursor: pointer;z-index: 10;}
.index-pro-notification i.icon-arrow-left-bold{left: 0px;}
.index-pro-notification i.icon-arrow-right-bold{right: 0px;}

#videos{width: 100%;padding:60px 0;box-sizing: border-box;}
.videos-hot{width: 100%;margin: 50px auto 0;position: relative;}
.videos-hot img{width: 100%;display: block;}
.videos-hot:before{content: '';width: 120px;height: 120px;background: url(../img/video_ico.webp) no-repeat;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-size: 100% 100%;transition: .5s;}
.videos-hot:hover:before{transform: translate(-50%,-50%) scale(1.2);}
.videos-box-list{width: 100%;margin-top: 20px;}
.videos-box-list ul{column-count: 4;column-gap: 30px;margin-top: 30px;}
.videos-box-list ul li{width: 100%;margin-bottom: 30px;transition: .5s;}
.videos-box-list ul li:hover{transform: translateY(-5px);}
.videos-box-list ul li .videos-img{width: 100%;position: relative;}
.videos-box-list ul li .videos-img img{width: 100%;display: block;}
.videos-box-list ul li .videos-img:before{content: '';width: 50px;height: 50px;background: url(../img/video_ico.webp) no-repeat;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-size: 100% 100%;transition: .5s;}
.videos-box-list ul li .videos-img:hover:before{transform: translate(-50%,-50%) scale(1.2);}

#news{width: 100%;padding: 40px 0;box-sizing: border-box;}
.news-hr{width: 100%;position: relative;height: 60px;margin: 50px 0;}
.news-hr span{display: inline-block;line-height: 60px;font-size: 54px;font-weight: bold;color: #303030;background: #FFFFFF;position: absolute;top: 0;left: 0;padding-right: 20px;box-sizing: border-box;}
.news-hr:before{content: '';display: block;width: 100%;height: 4px;background: #303030;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
.news-box{width: 100%;}
.news-hot{width: 50%;float: left;padding-right: 30px;box-sizing: border-box;}
.news-hot .news-img{width: 100%;margin-bottom: 10px;}
.news-img img{width: 100%;display: block;}
.news-text{width: 100%;}
.news-text h3{font-size: 28px;font-weight: bold;color: #303030;line-height: 40px;}
.news-text p{font-size: 18px;color: #8F8F8F;line-height: 24px;margin-bottom: 30px;height: 96px;overflow: hidden;}
.news-text span{font-size: 14px;color: #9C9C9C;line-height: 20px;margin-right: 30px;position: relative;}
.news-text span:last-child:before{content: '';display: block;height: 14px;width: 1px;background: #9C9C9C;position: absolute;top: 2px;left: -15px;}
.news-box-list{width: 50%;float: right;padding-left: 30px;box-sizing: border-box;}
.news-box-list ul{width: 100%;display: flex;flex-wrap: wrap;align-content: space-around;}
.news-box-list ul li{width: 100%;padding: 20px 0;box-sizing: border-box;border-top: 1px solid #CCCCCC;}
.news-box-list ul li:first-child{padding-top: 0;border-top: 0;}
.news-box-list ul li:last-child{padding-bottom: 0;}
.news-box-list ul li .news-img{width: 258px;float: right;}
.news-box-list ul li .news-text{width: calc(100% - 258px);float: left;padding-right: 20px;box-sizing: border-box;}



#blog{width: 100%;padding: 50px 0;box-sizing: border-box;}
.blog-list{width: 100%;}
.blog-list ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
.blog-list ul li{width: 32%;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);margin-bottom: 30px;}
.blog-img{width: 100%;position: relative;overflow: hidden;}
.blog-img img{width: 100%;display: block;transition: all .5s;}
.blog-img .blog-time{width: 80px;height: 80px;background: #FFFFFF;border-bottom-right-radius: 15px;position: absolute;top: 0;left: 0;text-align: center;padding-top: 10px;box-sizing: border-box;}
.blog-img .blog-time strong{font-size: 30px;line-height: 30px;color: #FED10D;display: inline-block;width: 100%;}
.blog-img .blog-time span{font-size: 20px;line-height: 30px;color: #01449B;display: inline-block;}
.blog-text{width: 100%;padding: 10px 20px 40px;box-sizing: border-box;position: relative;}
.blog-text:after{content: '';width: 100%;height: 10px;background: #303030;position: absolute;bottom: 0;left: 0;z-index: -1;transition: all .3s;}
.blog-text h3{font-size: 28px;line-height: 40px;color: #000000;position: relative;z-index: 1;transition: all .3s;}
.blog-text p{font-size: 18px;color: #8F8F8F;line-height: 24px;border-bottom: 2px solid #CCCCCC;padding-bottom: 20px;position: relative;z-index: 1;transition: all .3s;}
.blog-list ul li:hover .blog-text:after{height: 100%;}
.blog-list ul li:hover .blog-text h3,.blog-list ul li:hover .blog-text p{color: #FFFFFF;}
.blog-list ul li:hover .blog-img img{transform: scale(1.2);}

#encyclopedia{width: 100%;padding: 0 0 50px;box-sizing: border-box;background: #DCDCDC;margin-top: 50px;}
#encyclopedia .sec-title h2{transform: translateY(-50%);}
#encyclopedia .news-hr span{background: #DCDCDC;}
.encyclopedi-box{padding: 50px 0;box-sizing: border-box;}
.encyclopedi-box ul li{width: 100%;padding: 20px 20px 20px 200px;box-sizing: border-box;position: relative;border-top: 1px solid #CCCCCC;transition: .3s all;margin-top: 0;}
.encyclopedi-box ul li:first-child{border-top: 0;}
.encyclopedi-time{width: 180px;height: 100%;position: absolute;top: 0;left: 0;text-align: center;display: flex;flex-wrap: wrap;align-content: center;transition: .3s all;}
.encyclopedi-time i{font-size: 60px;font-weight: bold;line-height: 60px;display: block;width: 100%;}
.encyclopedi-time span{display: block;width: 100%;font-size: 24px;line-height: 30px;}
.encyclopedi-time:after{content: '';opacity: 0;width: 0;height: 0;border-style: solid;border-width: 20px;border-color: transparent transparent transparent #303030;position: absolute;top: 0;right: -40px;transition: all .5s;}
.encyclopedi-text{width: calc(100% - 320px);float: left;padding: 10px 50px;box-sizing: border-box;}
.encyclopedi-text h3{font-size: 28px;line-height: 40px;color: #000000;}
.encyclopedi-text p{font-size: 18px;color: #8F8F8F;line-height: 24px;}
.encyclopedi-img{width: 320px;float: right;overflow: hidden;}
.encyclopedi-img img{width: 100%;display: block;transition: all .3s;}
.encyclopedi-box ul li:hover{background: #FFFFFF;box-shadow: 0px 3px 6px  #CCCCCC;}
.encyclopedi-box ul li:hover .encyclopedi-time{background: #303030;color: #FFFFFF;}
.encyclopedi-box ul li:hover .encyclopedi-time:after{top: 50%;transform: translateY(-50%);opacity: 1;}
.encyclopedi-box ul li:hover .encyclopedi-img img{transform: scale(1.2);}

#download{width: 100%;padding: 50px 0;box-sizing: border-box;}
.download-box{width: 100%;padding: 50px 0;box-sizing: border-box;}
.download-box ul li{width: 100%;margin-bottom: 30px;padding-right: 150px;box-sizing: border-box;position: relative;border: 1px solid #707070;transition: .3s all;}
.download-img{width: 320px;float: left;overflow: hidden;}
.download-img img{width: 100%;display: block;}
.download-text{width: calc(100% - 320px);padding: 20px 40px 20px 150px;box-sizing: border-box;float: left;}
.download-time{width: 150px;position: absolute;height: 100%;position: absolute;top: 0;left: 320px;display: flex;flex-wrap: wrap;align-content: center;text-align: center;}
.download-time i{font-size: 40px;font-weight: bold;line-height: 40px;display: block;width: 100%;}
.download-time span{display: block;width: 100%;font-size: 18px;line-height: 18px;}
.download-text h3{font-size: 28px;line-height: 40px;color: #000000;}
.download-text p{font-size: 18px;color: #8F8F8F;line-height: 24px;}
.download-ico{width: 150px;height: 70px;line-height: 70px;border-left: 1px solid #707070;text-align: center;position: absolute;top: 50%;right: 0;transform: translateY(-50%);}
.download-ico a{color: #303030;}
.download-ico i{font-size: 70px;}
.download-box ul li:hover{box-shadow: 0px 3px 6px  #CCCCCC;transform: translate(-10px,-10px);}

#contact{width: 100%;padding: 30px 0 80px;box-sizing: border-box;background: #82CAFF;}
.contact-title{width: 100%;text-align: center;}
.contact-title h2{font-size: 40px;line-height: 70px;font-weight: bold;}
.contact-box{width: 100%;max-width: 1130px;margin: 0 auto;margin-top: 70px;}
.contact-box p{width: 49%;float: left;margin: 15px 0;}
.contact-box p:nth-child(even){margin-left: 2%;}
.contact-box input{font-size: 22px;width: 100%;height: 50px;padding: 0 15px;box-sizing: border-box;border-radius: 6px;color: #9C9C9C;border: 0;background: none;transition: .5s;background: #FFFFFF;}
.contact-box p:nth-last-child(2){width: 100%;}
.contact-box textarea{font-size: 22px;height: 300px;padding: 15px;box-sizing: border-box;width: 100%;border-radius: 6px;border: 0;border: 0;color: #9C9C9C;transition: .5s;background: #FFFFFF;}
.contact-box p:last-child{width: auto;margin-left: 0;}
.contact-box p:last-child input{width: auto;height: auto;line-height: 50px;padding: 0 50px;box-sizing: border-box;cursor: pointer;border: 0;background: #02BB8F;color: #F7FBFF;font-size: 24px;transition: .5s;opacity: .7;}
.contact-box input::placeholder,.contact-box textarea::placeholder{color: #9C9C9C;}
.contact-box p:last-child input:hover{opacity: 1;}


@media only screen and (max-width: 1380px){
	.index-pro-notification i{z-index: 1;}
	.index-pro-notification i.icon-arrow-left-bold{left: 0;}
	.index-pro-notification i.icon-arrow-right-bold{right: 0;}
	#sf-content{padding: 0 40px;box-sizing: border-box;}
	.news-text h3,.blog-text h3,.encyclopedi-text h3,.download-text h3{font-size: 22px;}
	.news-hot{width: 45%;padding-right: 20px;}
	.news-box-list{width: 55%;}
	.news-text p,.blog-text p,.encyclopedi-text p,.download-text p{font-size: 14px;line-height: 20px;height: 60px;margin-bottom: 15px;}
	.news-box-list ul li .news-img{width: 200px;}
	.news-box-list ul li .news-text{width: calc(100% - 200px);}
}
@media only screen and (max-width: 1280px){
	.news-text h3,.blog-text h3,.download-text h3{font-size: 20px;line-height: 30px;}
	.news-hr{margin: 30px 0;}
	.news-hr span{font-size: 30px;}
	.news-hr:before{height: 2px;}
	.encyclopedi-img{width: 250px;}
	.encyclopedi-text{width: calc(100% - 250px);}
	.download-img{width: 250px;}
	.download-text{width: calc(100% - 250px);}
	.download-time{left: 250px;}
	.download-box ul li{padding-right: 120px;}
	.download-ico{width: 120px;height: 50px;line-height: 50px;}
	.download-ico i{font-size: 50px;}
}
@media only screen and (max-width: 1024px){
	#product{padding-top: 30px;}
	.sec-title{height: 60px;}
	.sec-title h2{font-size: 32px;line-height: 60px;}
	.sec-title:before{height: 4px;width: 60px;}
	.product-box-list ul{column-gap: 15px;margin-top: 15px;}
	.product-box-list ul li{margin-bottom: 15px;}
	#videos{padding: 30px 0;}
	.videos-hot{width: 100%;}
	.videos-box-list ul{column-gap: 15px;margin-top: 15px;}
	.videos-box-list ul li{margin-bottom: 15px;}
	
	.news-hot{width: 100%;padding-right: 0;border-bottom: 1px solid #CCCCCC;}
	.news-box-list{width: 100%;padding-left: 0;}
	.news-box-list ul{align-content: space-around;justify-content: space-between;margin-top: 20px;}
	.news-box-list ul li{width: 32%;padding: 0;border: 0;}
	.news-hot .news-img{width: 30%;float: left;}
	.news-text{width: 70%;float: right;padding-left: 30px;box-sizing: border-box;}
	.news-box-list ul li .news-img{width: 100%;float: none;}
	.news-box-list ul li .news-text{width: 100%;float: none;padding: 0;}
	.news-box-list ul li .news-text h3{margin: 5px 0;}
	
	.encyclopedi-box ul li{padding: 20px 20px 20px 120px;}
	.encyclopedi-time{width: 120px;}
	.encyclopedi-time i{font-size: 42px;line-height: 42px;}
	.encyclopedi-time span{font-size: 18px;line-height: 20px;}
	.encyclopedi-time:after{border-width: 15px;right: -30px;}
}
@media only screen and (max-width: 900px){
	.product-box-list ul{column-count: 3;}
	.videos-box-list ul{column-count: 2;}
	.sec-title{height: 50px;}
	.sec-title h2{line-height: 50px;font-size: 26px;}
	#index-banner .index-banner-pagination span{height: 20px;width: 20px;}
	#sf-content{padding: 0 20px;box-sizing: border-box;}
	.blog-list ul li{width: 49%;}
	.blog-text p{margin-bottom: 0;border-bottom: 1px solid #CCCCCC}
	.encyclopedi-text{padding: 10px 15px;}
	.encyclopedi-time:after{border-width: 10px;right: -20px;}
	.download-text{padding: 20px 20px 20px 100px;}
	.download-time{width: 100px;}
}
@media only screen and (max-width: 768px){
	#sf-content{padding: 0 20px;}
	.product-box-list ul{column-count: 2;}
	.videos-box-list ul{column-count: 2;}
	
	#index-product{padding: 20px 0;}
	.index-hot-pro{margin-top: 20px;}
	
	.news-box-list ul li{width: 100%;margin-bottom: 20px;}
	.news-box-list ul li .news-img{float: left;width: 30%;}
	.news-box-list ul li .news-text{float: right;width: 70%;padding-left: 30px;}
	.news-hr span{font-size: 24px;}
	.encyclopedi-img{width: 200px;}
	.encyclopedi-text{width: calc(100% - 200px);}
	.download-img{width: 200px;}
	.download-text{width: calc(100% - 200px);}
	.download-time{left: 200px;}
	.download-time i{font-size: 26px;line-height: 26px;}
	.download-time span{font-size: 14px;line-height: 14px;}
	.download-text{padding: 10px 10px 10px 100px;}
}
@media only screen and (max-width: 640px){
	#index-banner .index-banner-pagination span{width: 12px;height: 12px;}
	#index-banner .index-banner-pagination{bottom: 10px;}
	.product-box-list ul{column-count: 1;}
	.videos-box-list ul{column-count: 1;}
	.videos-box-list ul li{margin-bottom: 10px;}
	.contact-box input{height: 40px;}
	.contact-box input,.contact-box textarea{font-size: 16px;}
	.contact-box textarea{height: 150px;}
	.contact-box p:last-child input{line-height: 40px;font-size: 18px;}
	.contact-box p{margin: 5px 0;}
	.contact-box{margin-top: 20px;}
	.sec-title h2{line-height: 36px;font-size: 18px;}
	.index-hot-pro ul{column-count: 1;}
	.index-hot-pro ul li{margin-bottom: 10px;}
	#videos{padding: 20px 0;}
	.news-img{width: 100% !important;}
	.news-text{width: 100% !important;padding: 10px 0 !important;}
	#blog{padding: 30px 0;}
	.blog-list ul li{width: 100%;}
	.news-text p, .blog-text p{height: auto;padding-bottom: 10px;margin-bottom: 10px;}
	#encyclopedia{padding: 0;}
	.encyclopedi-box ul li{padding: 0;margin-bottom: 30px;}
	.encyclopedi-box ul li:hover .encyclopedi-time{background: none;color: #303030;}
	.encyclopedi-text{width: calc(100% - 120px);}
	.encyclopedi-img{width: 100%;}
	.encyclopedi-time{position: static;height: 60px;float: left;margin-top: 30px;}
	.encyclopedi-box{padding: 0 0 30px;}
	.download-img{display: none;}
	.download-text{width: 100%;}
	.download-time{left: 0;}
	.download-box ul li{margin-bottom: 15px;}
}
@media only screen and (max-width: 450px){
	#sf-content{padding: 0 10px;}
	.index-news-hot-row,.index-news-hot-row:last-child{margin-bottom: 10px;}
	#contact{padding: 0 10px 20px;}
	.contact-box input, .contact-box textarea{font-size: 14px;}
	.download-ico{width: 80px;}
	.download-box ul li{padding-right: 80px;}
	.download-time{width: 80px;position: static;text-align: left;}
	.download-text{padding: 10px 10px 10px 10px;}
}
@media only screen and (max-width: 360px){
	.contact-box input, .contact-box textarea{font-size: 12px;}
	#index-banner{padding-top: 50px;}
}