.main{background: url(../hmw/bg.png) repeat center center;background-size: 100%;}

#box-1{padding-bottom: 0;}
#box-1 .block01{position: relative;margin-top: 50px;}
#box-1 .box1 {position: relative;overflow: hidden;margin: 0 -7%;}
#box-1 .box1 li{padding: 0 3.5%;}
#box-1 .box1 li .img{transform: scale(0.75);transition: 0.5s;border-radius: 20px;overflow: hidden;position: relative;}
#box-1 .box1 .swiper-slide-next .img{transform: scale(1);}
#box-1 .box1 .swiper-slide-next .img::after{opacity: 0;}
#box-1 .block01 .swiper-button-prev,#box-1 .block01 .swiper-button-next{top: 46%;}
#box-1 .block01 .swiper-button-prev{left: 27.3%;animation: leftBtn 1.5s infinite linear;}
#box-1 .block01 .swiper-button-next{right: 27.3%;animation: rightBtn 1.5s infinite linear;}
#box-1 .block01 .swiper-pagination{margin-top: 50px;}
@keyframes leftBtn{
	0%{transform: translateX(0px);}
	50%{transform: translateX(-15px);}
	100%{transform: translateX(0px);}
}
@keyframes rightBtn{
	0%{transform: translateX(0px);}
	50%{transform: translateX(15px);}
	100%{transform: translateX(0px);}
}



#box-2 .box1,#box-2 .pro_content{position: relative;}
#box-2 .box1{margin: 55px -11px 0 -11px;}
#box-2 .box1_1{position: relative;overflow: hidden;}
#box-2 .box1 ul {justify-content: left;}
#box-2 .box1 li{height: auto;/* width: 11.1%!important; */padding: 0 11px;}
#box-2 .box1 a{background: #fff;font-size: 18px;color: #000;padding:8px 10px;border-radius: 30px;text-align: center;height: 100%;display: flex;align-items: center;justify-content: center;border: 1px solid #000;position: relative;overflow: hidden;font-weight: bold;}
#box-2 .box1 li.on a,#box-2 .box1 li a:hover{border-color: #ffc800;color: #fff;}
#box-2 .box1 li.on a::after,#box-2 .box1 li a:hover::after{transform: translateX(-15%) skewX(45deg);}
#box-2 .box1 a span{z-index: 2;}

.probtn a::after{content: "";display: block;width: 130%;height: 100%;position: absolute;left: 0%;top: 0;z-index: 1;background: #ffc800;transition: 0.3s ease-in-out;transform: translateX(-130%) skewX(45deg);pointer-events: none;}
.probtn_ck{margin-top: 50px;}
.probtn_ck a{background: #ffc800;font-size: 20px;color: #000;padding: 15px 45px;border-radius: 30px;text-align: center;height: 100%;border: 1px solid #ffc800;position: relative;overflow: hidden;font-weight: bold;display: inline-block;}
.probtn_ck a span{z-index: 2;position: relative;}
.probtn_ck a span img{margin-right: 10px;width: 22px;animation: quan 8s linear infinite;}
.probtn_ck a::after{background: #FFFAF2;}
.probtn_ck a:hover::after{transform: translateX(-15%) skewX(45deg);}

#box-2 .pro_content{margin-top: 80px;}
#box-2 .pro_content ul{display: flex;flex-wrap: wrap;margin:-30px;}
#box-2 .pro_content ul li{width: 33.3%;padding: 30px;}
#box-2 .pro_content ul li>div{padding:50px 30px 25px 30px;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08);background: #fff;border-radius: 20px;overflow: hidden;height: 100%;}
#box-2 .pro_content li .img{position: relative;padding-top: 88%;transform: scale(0.88);}
#box-2 .pro_content li .img img{position: absolute;width: 100%;height: 100%;object-fit: contain;top: 0;left: 0;}
#box-2 .pro_content ul li .title{padding-top: 25px;text-align: center;font-size: 26px;color: #fff;border-top: 1px solid #E5E5E5;margin-top: 15px;}
#box-2 .pro_content ul li .des{ font-size: 16px;color: #fff;line-height: 20px;padding-top: 10px;height: 50px;overflow: hidden;  }
#box-2 .box1 .swiper-button-next, #box-2 .box1 .swiper-button-prev {width: 46px;height:46px;top: 50%;display: none;}
#box-2 .box1 .swiper-button-next{right: -60px;background: url(../img/ny_jtR1.png)no-repeat center center;background-size: contain;animation: none;}
#box-2 .box1 .swiper-button-prev{left: -60px;background: url(../img/ny_jtL1.png)no-repeat center center;background-size: contain;animation: none;}

@media (max-width:1600px){
	#box-2 .box1{margin-left:80px;margin-right:80px;}
}

@media (min-width:1199px) and (max-width:1599px){
	#box-2 .pro_content ul li>div {padding: 40px 30px;}
	#box-2 .box1 .swiper-button-next, #box-2 .box1 .swiper-button-prev{display: block;}
}
@media (min-width:767px) and (max-width:1199px){
	#box-1 .block01 .swiper-button-prev,#box-1 .block01 .swiper-button-next{top: 44%;}
	#box-1 .block01 .swiper-button-prev{left: 26.8%;}
	#box-1 .block01 .swiper-button-next{right: 26.8%;}
	
	#box-2 .box1{margin-left:40px;margin-right:40px;}
	#box-2 .box1{margin-top: 45px;}
	#box-2 .box1 li{padding: 0 7px;}
	#box-2 .box1 a{font-size: 16px;padding:7px 9px;}
	.probtn_ck{margin-top: 35px;}
	.probtn_ck a{font-size: 18px;padding: 12px 30px;}
	.probtn_ck a span img{width: 18px;}
	#box-2 .pro_content {margin-top: 60px;}
	#box-2 .pro_content ul{margin: -22px;}
	#box-2 .pro_content ul li{padding: 22px;}
	#box-2 .pro_content ul li>div {padding: 30px 20px;}
	#box-2 .pro_content ul li .title{font-size: 20px;padding-top: 20px;margin-top: 20px;}
	#box-2 .box1 .swiper-button-next, #box-2 .box1 .swiper-button-prev { width: 36px;height:36px;display: block;top: 59%;}
	#box-2 .box1 .swiper-button-next{right: -40px;}
	#box-2 .box1 .swiper-button-prev{left: -40px;}
}
@media (min-width:767px) and (max-width:850px){
	#box-2 .pro_content ul li{width: 50%;}
	#box-2 .pro_content ul li>div {padding: 35px 20px;}
}
@media (max-width:767px){
	#box-1 .block01{margin-top: 32px;}
	#box-1 .box1{margin: 0 5px;}
	#box-1 .box1 li {padding: 0 15px;}
	#box-1 .box1 li .img{border-radius: 15px;transform: scale(1);}
	#box-1 .block01 .swiper-button-prev,#box-1 .block01 .swiper-button-next{top: 44%;width: 40px;display: none;}
	#box-1 .block01 .swiper-button-prev{left: -1px;}
	#box-1 .block01 .swiper-button-next{right: -1px;}
	
	#box-2 .box1{margin: 35px 40px 0 40px;}
	#box-2 .box1 li{padding: 0 7px;}
	#box-2 .box1 a{font-size: 16px;padding:6px 7px;}
	.probtn_ck{margin-top: 35px;}
	.probtn_ck a{font-size: 16px;padding: 10px 25px;}
	.probtn_ck a span img{width: 16px;margin-right: 7px;}
	#box-2 .pro_content {margin: 45px 0px 0 0px;}
	#box-2 .pro_content {margin-top: 35px;}
	#box-2 .pro_content ul{margin: 0 -8px;}
	#box-2 .pro_content ul li{width: 100%;padding: 8px;}
	#box-2 .pro_content ul li>div {padding:30px;border-radius: 10px;}
	#box-2 .pro_content li .img{transform: scale(1);padding-top: 70%;}
	#box-2 .pro_content ul li .title{font-size: 15px;padding-top: 13px;}
	#box-2 .box1 .swiper-button-next, #box-2 .box1 .swiper-button-prev { width: 32px;height:32px;display: block;top: 62%;}
	#box-2 .box1 .swiper-button-next{right: -35px;}
	#box-2 .box1 .swiper-button-prev{left: -35px;}
}