﻿#box-1{background: url(../image/product_box1_bj.png) no-repeat center center;background-size: cover;padding-bottom: 85px;}
#box-1 .box1{position: relative;overflow: hidden;padding-top: 5px;}
#box-1 .box1 li>div{padding: 0 10%;}
#box-1 .box1 li>div>.img {transition: 0.5s;transform: scale(0.85);}
#box-1 .box1 li.swiper-slide-next>div>.img{transform: scale(1);}
#box-1 .box1 li>div>.img img{transition: 0.5s;}
#box-1 .box1 li>div:hover>.img img{transform: rotate(5deg);}
#box-1 .box1 li .content .box1_title_img{width: 60%;margin:25px auto 15px auto;}
#box-1 .box1 li .content .desc{width: 85%;margin: auto;opacity: 0;}
#box-1 .box1 li.swiper-slide-next .content .desc{opacity: 1;transition: 0.5s;}
#box-1 .box1 li .content .desc p{font-size: 20px;text-align: center;}
#box-1 .swiper-button-prev,#box-1 .swiper-button-next{top: 25.3vw;width: 67px;height: 67px;}
#box-1 .swiper-button-prev{left: 33.5%;background: url(../image/product_box1_jtL.png) no-repeat center center;background-size: contain;}
#box-1 .swiper-button-next{right: 33.5%;background: url(../image/product_box1_jtR.png) no-repeat center center;background-size: contain;}



#box-2 .box1{position: relative;margin: 45px 70px 0 70px;}
#box-2 .box1_1{position: relative;overflow: hidden;}
#box-2 .box1 ul {/* justify-content: left; */justify-content: center;}
#box-2 .box1 li{height: auto;width: auto;padding: 0 25px;}
#box-2 .box1 a{background: transparent;font-size: 22px;color: #000;padding: 13px 25px;border-radius: 30px;text-align: center;height: 100%;display: flex;align-items: center;justify-content: center;border: 1px solid #000;}
#box-2 .box1 li:hover a,#box-2 .box1 li.on a{background: #d03233;color: #000;transition:background 0.3s,border 0.3s;}

#box-2 .pro_content{margin-top: 20px;}
#box-2 .pro_content ul{display: flex;flex-wrap: wrap;margin: 0 -27px;}
#box-2 .pro_content ul li{width: 50%;padding:23px 25px;}
#box-2 .pro_content ul li>div{position: relative;border-radius: 20px;overflow: hidden;-webkit-transform: translate3d(0, 0, 0);border: 4px solid #FAC423;}
#box-2 .pro_content li .img{position: relative;padding-top: 73%;overflow: hidden;}
#box-2 .pro_content li .img img{position: absolute;width: 100%;height: 100%;object-fit: cover;top: 0;left: 0;}
#box-2 .pro_content ul li .title{position: absolute;width: 100%;padding: 18px 15px 16px 15px;bottom: 0;text-align: center;font-size: 26px;color: #000;background: #d03233;}

#box-2 .pro_content .pro_ckgd{background: transparent;font-size: 22px;color: #000;padding: 13px 52px;border-radius: 30px;text-align: center;border: 1px solid #333333;display: inline-block;margin-top: 40px;}
#box-2 .pro_content .pro_ckgd:hover{background: #d03233;border: 1px solid #d03233;color: #000;transition:background 0.3s,border 0.3s;cursor: pointer;}

#box-2 .box1 .swiper-button-next, #box-2 .box1 .swiper-button-prev { width: 40px;display: block;top: 58%;display: none;}
#box-2 .box1 .swiper-button-next{right: -70px;}
#box-2 .box1 .swiper-button-prev{left: -70px;}

@media (min-width:1500px){
	#box-2 .box1 li{width: 270px!important;}
}
@media (min-width:1199px) and (max-width:1500px){
	#box-1 .swiper-button-prev,#box-1 .swiper-button-next{top: 25.8vw;width: 58px;height: 58px;}
	#box-1 .box1 li .content .desc{width: 100%;}
}
@media (min-width:767px) and (max-width:1199px){
	#box-1 .box1 li>div {padding: 0 9%;}
	#box-1 .box1 li .content .box1_title_img{width: 65%;}
	#box-1 .box1 li .content .desc{width: 100%;}
	#box-1 .box1 li .content .desc p{font-size: 18px;}
	#box-1 .swiper-button-prev,#box-1 .swiper-button-next{top: 27.9vw;width: 45px;height: 45px;}
	#box-1 .swiper-button-prev{left: 32%;}
	#box-1 .swiper-button-next{right: 32%;}
	
	#box-2 .box1{margin: 45px 50px 0 50px;}
	#box-2 .box1 li {padding: 0 20px;}
	#box-2 .box1 a{padding: 12px;font-size: 18px;}
	#box-2 .pro_content {margin-top: 20px;}
	#box-2 .pro_content ul{margin: 0 -18px;}
	#box-2 .pro_content ul li {padding: 18px;}
	#box-2 .pro_content ul li>div{border-radius:15px;}
	#box-2 .pro_content li .img{padding-top: 68%;}
	#box-2 .pro_content ul li .title{font-size: 20px;padding: 12px 15px 8px 15px;}
	
	#box-2 .pro_content .pro_ckgd{font-size: 20px;padding: 11px 45px;}
	
	#box-2 .box1 .swiper-button-next, #box-2 .box1 .swiper-button-prev { width: 35px;/* display: block; */top: 60%;}
	#box-2 .box1 .swiper-button-next{right: -50px;}
	#box-2 .box1 .swiper-button-prev{left: -50px;}
}

@media (min-width:767px) and (max-width:850px){
	#box-1 .box1 li .content .box1_title_img {width: 70%;}
	#box-1 .box1 li .content .desc p{font-size: 15px;}
	#box-1 .swiper-button-prev,#box-1 .swiper-button-next{top: 29.5vw;width: 37px;height: 37px;}
	#box-1 .swiper-button-prev{left: 32%;}
	#box-1 .swiper-button-next{right: 32%;}
	
	#box-2 .box1{margin: 45px 50px 0 50px;}
	#box-2 .box1 li{padding: 0 20px;}
	#box-2 .box1 a{font-size: 15px;}
	#box-2 .pro_content ul li{width: 50%;}
}
@media (max-width: 767px){
	#box-1{padding-bottom: 60px;}
	#box-1 .box1 li>div {padding: 0 10%;}
	#box-1 .box1 li>div>.img {transform: scale(1);}
	#box-1 .box1 li .content .desc{width: 100%;opacity: 1;}
	#box-1 .box1 li .content .desc p {font-size: 18px;}
	#box-1 .swiper-button-prev,#box-1 .swiper-button-next{display: none;}
	#box-1 .swiper-pagination{padding-top: 30px;}
	#box-1 .swiper-pagination span{background: rgba(255, 255, 255, 0);border: 1px solid #000;opacity: 1;}
	#box-1 .swiper-pagination .swiper-pagination-bullet-active{background: #000;}
	
	
	
	#box-2 .box1{margin: 35px 32px 0 32px;}
	#box-2 .box1_1 {margin: 0 0px;}
	#box-2 .box1 ul {justify-content: center;}
	#box-2 .box1 li{padding: 0 8px;}
	#box-2 .box1 a{font-size: 15px;padding: 7px 5px;}
	#box-2 .box1 .swiper-button-next, #box-2 .box1 .swiper-button-prev {width: 25px;display: block;top: 75%;}
	#box-2 .box1 .swiper-button-next{right: -35px;}
	#box-2 .box1 .swiper-button-prev{left: -35px;}
	
	#box-2 .pro_content {margin-top: 30px;}
	#box-2 .pro_content ul{margin: 0;}
	#box-2 .pro_content ul li{width: 100%;padding: 12px 0;}
	#box-2 .pro_content ul li>div{border-radius: 15px;border: 3px solid #FAC423;}
	#box-2 .pro_content ul li .title{padding: 10px 15px 7px 15px;font-size: 18px;}
	
	#box-2 .pro_content .pro_ckgd{font-size: 16px;padding: 9px 35px;margin-top: 40px;}
	
}