@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(--Hcolor);}
.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: 250px; position: relative;}
.categories-itm {overflow: hidden; height: 250px;border-radius: 5px;}
.categories-itm img{width: 100%; height: 100%;object-fit:cover;}
.categories-list p{width: 100%; text-align: center; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .5s ease; padding: 15px 30px; font-weight: 500; margin: 0 auto;position: absolute; bottom: 0;background-color: #1a4275b8 ;border-radius: 0 0 5px 5px;}
.categories-list a:hover .categories-tit{background-color: #86c0e6bb;}
.categories-list:hover{box-shadow: 0 20px 20px rgba(0, 0, 0, .1);transition: all .5s ease;}
/* 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(--Hcolor);}
.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 .usBox{display: flex; margin-top: 35px;}
.aboutus-tit{width: 50%;overflow: hidden; background: linear-gradient(to right, #1a4275, #86bfe6);}
.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 span{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;}
/* 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(--Hcolor);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;}
.articlbox {padding: 80px 0;}
.articlbox .title {font-size: 32px;color: #151515;margin-bottom: 30px;font-weight: 400;text-align: center;}
.articlbox .date {text-align: center;border-bottom: 0.5px solid #e3e3e3;padding-bottom: 1rem;color: #8e8e8e;font-size: .85rem;}
.articlbox .content {margin: 30px 0;line-height: 30px;font-size: 18px;color: #4b4b4b;}
@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 .usBox{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;}
}