#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: #E8F5FF;}
.sec-title{text-align: center;}
.sec-title h2{font-size: 40px;font-weight: bold;color: #FFFFFF;background: #303030;line-height: 80px;font-size: 40px;font-weight: bold;padding: 0 30px;box-sizing: border-box;display: inline-block;}
.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;background: #E8F5FF;}
.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: 80px 0;box-sizing: border-box;position: relative;}
#news .sec-title:before{background: #FFFFFF;}
.news-box{width: 100%;box-sizing: border-box;background: #FFFFFF;padding: 50px;}
.index-news-hot{width: 100%;display: flex;justify-content: space-between;}
.index-news-hot-row{width: 48%;position: relative;overflow: hidden;}
.index-news-hot-row a{color: #FFFFFF;}
.index-news-hot-row img{width: 100%;display: block;}
.index-news-hot-row .hot-news-text{width: 100%;left: 0px;bottom: 0;opacity: 0.65;background: #818181;position: absolute;padding: 10px 20px;box-sizing: border-box;transform: translateY(100%);transition: all .5s;}
.index-news-hot-row:hover .hot-news-text{transform: translateY(0);}
.hot-news-text h3{font-size: 22px;font-weight: bold;line-height: 40px;height: 40px;overflow: hidden;}
.hot-news-text p{font-size: 16px;line-height: 28px;height: 56px;overflow: hidden;}
.news-box ul{width: 100%;padding-top: 20px;}
.news-box ul li{width: 100%;margin: 20px 0;transition: .5s;display: flex;justify-content: space-between;}
.news-box ul li:hover{transform: translateY(-5px) scale(1.02);}
.news-img{width: 15%;overflow: hidden;}
.news-img img{width: 100%;display: block;transition: .5s;}
.news-img:hover img{transform: scale(1.1);}
.news-text{width: 70%;padding: 0 40px;box-sizing: border-box;}
.news-text h3{font-size: 22px;line-height: 40px;font-weight: bold;margin-top: 5px;}
.news-text h3 a{color: #151515;}
.news-text p{font-size: 16px;line-height: 26px;}
.news-text time{font-size: 14px;line-height: 26px;margin-top: 10px;text-align: right;width: 100%;display: block;}
.news-link{width: 15%;text-align: center;display: flex;justify-content: center;flex-direction: column;}
.news-link a{display: inline-block;line-height: 44px;font-size: 16px;background: #2688D1;color: #FFFFFF;border-radius: 30px;}

#blog{width: 100%;padding: 50px 0;box-sizing: border-box;}
.blog-box ul{margin-top: 50px;}
.blog-box ul li{width: 100%;margin: 30px 0;height: 200px;position: relative;padding-left: 305px;box-sizing: border-box;transition: .5s;}
.blog-box ul li:hover{transform: scale(1.02) translate(-5px,-5px);}
.blog-box ul li:first-child{margin: 0;}
.blog-box ul li .blog-img{width: 305px;height: 100%;position: absolute;top: 0;left: 0;}
.blog-box ul li .blog-img img{width: 100%;display: block;}
.blog-box ul li .blog-text{width: 100%;padding: 20px 250px 0 40px;box-sizing: border-box;height: 100%;position: relative;}
.blog-text h3{font-size: 22px;line-height: 32px;font-weight: bold;}
.blog-text h3 a{color: #151515;}
.blog-text p{font-size: 16px;line-height: 26px;margin-top: 20px;}
.blog-text time{font-size: 22px;line-height: 80px;display: block;position: absolute;height: 80px;top: 50%;right: 0;transform: translateY(-50%);width: 230px;text-align: center;}
.blog-text time:before{content: '';height: 100%;width: 3px;background: #AAD3F0;position: absolute;top: 0;left: 0;}
#encyclopedi{width: 100%;padding: 50px 0;box-sizing: border-box;background: #82CAFF;}
.encyclopedi-box{margin-top: 70px;padding: 50px;box-sizing: border-box;background: #82CAFF;}
.encyclopedi-box ul{column-count: 3;column-gap: 30px;}
.encyclopedi-box ul li{break-inside: avoid;width: 100%;margin-bottom: 30px;transition: .5s;box-shadow: 0px 3px 6px #888888;}
.encyclopedi-box ul li:hover{transform: scale(1.02);box-shadow: 0px 3px 6px #000000;}
.encyclopedi-box ul li .encyclopedi-img{width: 100%;overflow: hidden;}
.encyclopedi-box ul li .encyclopedi-img img{width: 100%;display: block;transition: .5s;}
.encyclopedi-box ul li .encyclopedi-img:hover img{transform: scale(1.2);}
.encyclopedi-box ul li .encyclopedi-text{padding: 10px 15px;box-sizing: border-box;background: #FFFFFF;}
.encyclopedi-text h3{font-size: 22px;line-height: 32px;font-weight: bold;}
.encyclopedi-text h3 a{color: #151515;}
.encyclopedi-text p{font-size: 16px;line-height: 24px;margin-top: 10px;color: #9C9C9C;}
.encyclopedi-text time{display: block;text-align: right;margin-top: 10px;font-size: 14px;line-height: 24px;color: #9C9C9C;}

#download{width: 100%;padding: 50px 0;box-sizing: border-box;background: #82CAFF;}
.download-box{width: 100%;padding: 50px 0;box-sizing: border-box;}
.download-box ul{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
.download-box ul li{width: calc(50% - 30px);margin: 15px;box-sizing: border-box;padding-left: 25%;position: relative;transition: all .5s;background: #FFFFFF;}
.download-box ul li:hover{box-shadow: 0px 0px 10px #888888;transform: scale(1.02);}
.download-box ul li .download-img{width: 50%;position: absolute;top: 0;left: 0;height: 100%;}
.download-box ul li .download-img img{width: 100%;height: 100%;display: block;}
.download-box ul li .download-text{width: 100%;padding: 20px 10px;box-sizing: border-box;}
.download-box ul li h3{font-size: 22px;font-weight: bold;line-height: 40px;height: 40px;overflow: hidden;}
.download-box ul li h3 a{color: #151515;}
.download-box ul li h3 a:hover{color: #26D3B2;}
.download-box ul li p{font-size: 16px;line-height: 22px;height: 66px;overflow: hidden;color: #9C9C9C;}
.download-link{font-size: 20px;line-height:40px;text-align: center;margin-top: 15px;background: #2688D1;color: #FFFFFF;border-radius: 20px;padding: 0 20px;box-sizing: border-box;display: inline-block;}
.download-link img{width: 12px;}

#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;}
}
@media only screen and (max-width: 1280px){
	#sf-content{padding: 0 40px;box-sizing: border-box;}
	.news-box{transform: translateX(0);width: 100%;max-width: 1140px;padding: 40px;box-sizing: border-box;}
	#index-banner #sf-content{padding: 0;}
	.download-box ul li{width: 100%;padding-left: 420px;}
	.download-box ul li .download-img{width: 420px;}
}
@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:before{display: none;}
	.news-box ul{column-gap: 40px;}
	#blog{padding: 30px 0;}
	#encyclopedi{padding: 30px 0;}
	.encyclopedi-box{margin-top: 30px;}
	.encyclopedi-box ul{column-gap: 15px;}
	.encyclopedi-box ul li{margin-bottom: 15px;}
	.encyclopedi-text h3{font-size: 20px;}
	.encyclopedi-text p{font-size: 13px;}
	.encyclopedi-text time{font-size: 13px;}
	.download-box{margin-top: 30px;}
	#contact{padding: 0 40px 40px;}
	.contact-box{margin-top: 30px;}
	
	.blog-box ul li .blog-text{padding: 20px 180px 0 40px;}
	.blog-text time{width: 160px;font-size: 16px;}
	.download-box ul li{width: 100%;padding-left: 320px;}
	.download-box ul li .download-img{width: 320px;}
	
}
@media only screen and (max-width: 900px){
	.blog-box ul li .blog-text{padding: 10px 180px 0 20px;}
	.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;}
}
@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;}
	.news-box,.encyclopedi-box{padding: 20px;}
	.news-box ul{column-gap: 20px;}
	.hot-news-text h3,.news-text h3,.blog-text h3,.encyclopedi-text h3,.download-box ul li h3{font-size: 18px;line-height: 30px;height: auto;}
	.hot-news-text p,.news-text p,.blog-text p,.encyclopedi-text p,.download-box ul li p{font-size: 14px;line-height: 20px;height: auto;}
	.news-link{display: none;}
	.news-img{width: 30%;}
	.blog-box ul li{height: 150px;padding-left: 230px;margin: 15px 0;}
	.blog-box ul li .blog-img{width: 230px;}
	.blog-box ul li .blog-img img{height: 100%;}
	.blog-box ul li .blog-text{padding: 10px 140px 10px 10px;}
	.blog-text time{width: 130px;font-size: 14px;}
	.blog-text p{margin-top: 5px;font-size: 14px;line-height: 22px;}
	.contact-title h2{font-size: 32px;line-height: 50px;}
	.contact-box p{width: 100%;margin: 10px 0;}
	.contact-box p:nth-child(even){margin-left: 0;}
	.contact-box input,.contact-box textarea{font-size: 18px;}
	.encyclopedi-box ul{column-count: 2;}
	.videos-hot:before{width:90px;height: 90px;}
	#news{padding: 50px 0;}
	#index-product{padding: 20px 0;}
	.index-hot-pro{margin-top: 20px;}
}
@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;}
	.index-news-hot{display: block;}
	.index-news-hot-row{width: 100%;margin-bottom: 20px;}
	.index-news-hot-row:last-child{margin-bottom: 0;}
	.news-box ul{column-count: 1;}
	.blog-box ul li{padding-left: 0;height: auto;}
	.blog-box ul li .blog-img{position: static;width: 100%;height: auto;float: none;}
	.encyclopedi-box ul{column-count: 1;}
	.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;}
	.blog-box ul li:nth-child(2){padding-right: 0;}
	.sec-title h2{line-height: 36px;font-size: 18px;}
	.index-hot-pro ul{column-count: 1;}
	.index-hot-pro ul li{margin-bottom: 10px;}
	#news{padding: 20px 0;}
	.news-box ul{margin: 0 auto;padding: 20px 0;}
	.news-box{padding: 20px;}
	#blog{padding: 20px 0;}
	.blog-box ul{margin-top: 20px;}
	.encyclopedi-box{margin-top: 0;padding: 20px 0;background: none;}
	.encyclopedi-box ul li .encyclopedi-text{background: #FFFFFF;}
	#encyclopedi #sf-content{padding-top: 0;}
	.videos-hot{margin: 20px auto 0;}
	.videos-hot:before{width: 50px;height: 50px;}
	#videos{padding: 20px 0;}
	.download-box ul li{padding-left: 0;margin: 15px 0;}
	.download-box ul li .download-img{width: 100%;height: auto;position: static;}
	
}
@media only screen and (max-width: 450px){
	
	#sf-content{padding: 0 10px;}
	.news-box{padding:10px;}
	.index-news-hot-row,.index-news-hot-row:last-child{margin-bottom: 10px;}
	.news-box ul{padding: 0;}
	.news-box ul li{display: block;margin:0 0 10px;}
	.news-img{width: 100%;}
	.news-text{width: 100%;padding: 10px 0;}
	.news-text h3{font-size: 18px;line-height: 26px;}
	.news-text p{font-size: 14px;line-height: 20px;}
	.news-text time{font-size: 12px;line-height: 20px;}
	#contact{padding: 0 10px 20px;}
	.contact-box input, .contact-box textarea{font-size: 14px;}
	
}
@media only screen and (max-width: 360px){
	.contact-box input, .contact-box textarea{font-size: 12px;}
	#index-banner{padding-top: 50px;}
}