@import url(besscolor.css);
body{background-color: #f4f4f4;}
/* banner */
.swiper {width: 100%; padding-left: 0; padding-right: 0; position: relative;}
.swiper-slide {text-align: center; font-size: 18px; align-items: center; height: auto;}
.swiper-slide img { display: block; width: 100%;  height: 100%; object-fit: cover;}
.swiper-button-next, .swiper-button-prev{display: none;  top: 60%;width: 25px; text-align: center; height: 45px; line-height: 45px; background: #333; background: rgba(0,0,0,.2); z-index: 2; transition: all .3s ease-out; color: #fff; margin-top: -30px; text-decoration: none; -webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none;}
.mySwipers:hover>.swiper-button-next,.mySwipers:hover>.swiper-button-prev{display: block;}
.swiper-button-next:after, .swiper-button-prev:after{font-size: 14px;}
.swiper-pagination-bullet{width: 15px; height: 15px;}
.swiper-pagination-bullet-active{background: var(--Bcolor);}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 30px;}
/* categories */
.categories{margin-bottom: 50px;}
.categories .categories-box{display: flex;justify-content: space-between;flex-wrap: wrap;width: 100%;}
.categories .categories-list{width: 24%; height: 220px; position: relative;}
.categories-itm {overflow: hidden; height: 220px;border-radius: 15px;}
.categories-itm img{width: 100%; height: 100%;object-fit:cover;}
.categories-list p{width: 100%; text-align: center; color: #ffffff; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .5s ease; padding: 15px 30px; font-weight: 600; margin: 0 auto;position: absolute; bottom: 0;background-color: #ff6d3dd3;border-radius: 0 0 15px 15px;}
/* products */
.tit{text-align: center; padding: 50px 0 55px;}
.tit h2{font-size: 50px;font-family: "Sansation1"; color: #333; position: relative;}
.tit h2::after{ display: block; content: ''; position: absolute; bottom: -5px; left: 50%; margin-left: -25px; width: 50px;  height: 3px; background-color:var(--Bcolor);}
.tit p{font-size: 16px; font-family: "Sansation4"; color: #999; margin-top: 20px;}
.products .txtBox{background-color: #fff; padding-bottom: 10px;}
.products .proImgBox{overflow: hidden;}
.products .txtBox .proTitle { width: 100%; text-align: left; color: #333; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .5s ease; padding: 15px 30px; font-weight: 600; margin: 0 auto;}
.products .txtBox .proSummry { width: 100%;  padding: 0 30px; text-align: left; font-size: 14px; color: #999; line-height: 130%; margin-bottom: 10px;display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.products .txtBox span {font-family: "Sansation4"; width: 100px; height: 30px; line-height: 30px; border: 1px solid #999; display: block; text-align: center; margin: 20px 0px 20px 30px; color: #999; font-size: 12px;}
.mySwiper01{padding-bottom: 80px;}
.mySwiper01 .swiper-wrapper a{width: 100%;}
.mySwiper01 .swiper-wrapper a:hover{box-shadow: 0 20px 20px rgba(0,0,0,.1);transition: all .5s ease;}
.mySwiper01 .swiper-wrapper a:hover .proTitle{color: var(--Bcolor);transition: all .5s ease;}
.mySwiper01 .swiper-wrapper a:hover span{background: var(--Bcolor); color: #fff; border: none;transition: all .5s ease;}
/* about us */
.aboutus{margin-top: 35px;}
.aboutus .usBox{display: flex; }
.aboutus-tit{width: 50%;overflow: hidden; background: linear-gradient(to right, #FF6F3D, #ff8257);}
.about-img{width: 50%;overflow: hidden;}
.about-img .img-box{width: 100%;height: 100%;}
.aboutus-tit{padding: 100px 100px 50px 11%;}
.aboutus-tit h2{font-size: 50px;font-family: "Sansation1"; color: #fff; position: relative;}
.aboutus-tit h2::after{ display: block; content: ''; position: absolute; bottom: -15px; margin-left: 0px; width: 50px;  height: 3px; background-color:#fff;}
.aboutus-tit p{color: #fff;font-family: "Sansation4"; line-height: 36px; font-size: 16px; margin-top: 50px;display: -webkit-box; overflow: hidden;  -webkit-line-clamp:7; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.aboutus-tit a{font-family: "Sansation4"; width: 150px; height: 45px; line-height: 45px; border: 1px solid #fff; display: block; text-align: center; margin: 60px 0px 20px 0px; color: #fff; font-size: 12px;}
/* video */
.groups-video{ display: block; position: relative; cursor: pointer;}
.groups-video .img-box .video-cover-mask{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-color: rgba(0, 0, 0, 0.5);}
.groups-video .video-intro { pointer-events: none; position: absolute; top: 50%; left: 50%; min-width: 240px; text-align: center; padding: 32px;  color: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.groups-video .video-intro-play { display: inline-block; vertical-align: middle; width: 64px; height: 64px; line-height: 1; text-align: center; font-size: 64px;  transition: color .5s; color: #fff;}
/* International Certificates */
.certificates{background-color: #fff;}
.mySwiper02{padding-bottom: 80px;}
/* news */
.news-box{display: flex; justify-content: space-between; flex-wrap: wrap;}
.news-list{width: 31%; margin-bottom: 50px;}
.news-list .time{font-size: 12px; color: #999; margin-bottom: 30px;}
.news-list .title{font-size: 30px; font-weight: normal; color: var(--Bcolor);margin-bottom: 20px; display: -webkit-box; overflow: hidden;  -webkit-line-clamp:2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.news-list .cont{font-size: 16px; color: #666; line-height: 24px;margin-bottom: 30px;display: -webkit-box; overflow: hidden;  -webkit-line-clamp:3; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.news-list .more{font-family: "Sansation4"; font-size: 12px; color: #666; position: relative;}
.news-list .more i{color: #999; font-size: 10px; margin-left: 20px;}
.news-list .more::after{ display: block; content: ''; position: absolute; bottom: -15px; margin-left: 0px; width: 100px;  height: 1px; background-color:#999;}
.news-list a:hover .cont{color: var(--Bcolor);transition: all .5s ease;}
.news-list a:hover .more::after{background-color:var(--Bcolor); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}

.sub-image{
	vertical-align: middle; /* 确保图片垂直居中 */
    margin-left: 5px; /* 调整图片与文字之间的间距 */
    width: 20px;
}
 
@media only screen and (max-width: 1600px){
	.tit h2,.aboutus-tit h2{font-size: 45px; transition: all .5s ease;}
	.aboutus-tit{padding: 80px 80px 0 5%;}
	.aboutus-tit p{-webkit-line-clamp:4;}
	.aboutus-tit span{margin-top: 30px;}
}
@media only screen and (max-width: 1200px){
	.tit h2,.aboutus-tit h2{font-size: 30px;transition: all .5s ease;}
	.aboutus-tit{padding: 60px 60px 30px 5%;}
	.aboutus-tit p{-webkit-line-clamp:3;}
	.news-list .title{font-size: 26px;}
	.products .txtBox .proTitle,.products .txtBox .proSummry{ padding: 15px 20px;}
	.products .txtBox span{margin-left: 20px;}
}
@media only screen and (max-width: 769px){
	.aboutus{display: block;}
	.news-list{width: 48%; margin-bottom: 50px;}
	.aboutus-tit,.about-img{width: 100%;}
	.news-list .title{font-size: 22px;}
	.categories .categories-list{width: 49%;margin-bottom: 40px;}
	.categories .categories-list p{font-size: 13px;}
}