.pro_b1 .box1{position: relative;overflow: hidden;margin: 55px -5px 0 -5px;}
.pro_b1 .box1 li{transition: 0.6s;flex: 1;padding:0 5px;}
.pro_b1 .box1 li>div{position: relative;width: 100%;border-radius: 30px;overflow: hidden;border: 3px solid var(--colormain);background: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0) 100%);-webkit-transform: translate3d(0, 0, 0);}
.pro_b1 .box1 .img_img{height: 45vw;max-height: 650px;position: relative;}
.pro_b1 .box1 .img_img img{position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.pro_b1 .box1 .img_img::after{content: "";position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 15%, transparent);pointer-events: none;}
.pro_b1 .box1 .bg1{opacity: 0;}
.pro_b1 .box1 .bg2{opacity: 1;}
.pro_b1 .box1 .content{width: 100%;position: absolute;left: 0;bottom: 0px;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.pro_b1 .box1 .con1{opacity: 0;padding: 10px 63px;transition: 0s;}
.pro_b1 .box1 .con1 .title{font-size: 100px;color: #FEFEFE;}
.pro_b1 .box1 .con2{transition: 0.3s;}
.pro_b1 .box1 .con2 .title{font-size: 72px;color: #FEFEFE;text-align: center;padding: 50px 5px;}

.pro_dh{margin-top: 53px;}
.pro_dh ul{justify-content: center;flex-wrap: wrap;transform: none!important;}
.pro_dh li {padding: 0 75px;position: relative;width: auto;}
.pro_dh li:not(:first-child)::after{content: '';width: 1px;height: 56%;background: #676769;opacity: 0.5;position: absolute;top: 24%;left: 0;}
.pro_dh li a{font-size: 48px;color: #A0A0A0;transition: 0.3s;}
.pro_dh li.swiper-slide-thumb-active a,.pro_dh li a:hover{color: var(--colormain);}

.pro_list{margin: 55px -27px 0 -27px;}
.pro_list>ul>li{opacity: 0!important;transition: 0.5s;}
.pro_list>ul>li.swiper-slide-active{opacity: 1!important;z-index: 2;}
.pro_list>ul>li.swiper-slide-active .box{display: block;}
.pro_list>ul>li:not(:first-child) .box .wow{animation-name: none!important;visibility: visible!important;}

.pro_list .box{display: none;}
.pro_list .box ul{display: flex;flex-wrap: wrap;}
.pro_list .box ul li{width: 33.333%;padding:35px 27px;}

@media (min-width:1500px){
	.pro_b1{padding-bottom: 175px;}
	.pro_b2{padding-top: 130px;}
}
@media (min-width: 767px){
	.pro_b1 .box1 li.on{flex: 3.75;}
	.pro_b1 .box1 li.on .bg1{opacity: 1;}
	.pro_b1 .box1 li.on .bg2,.pro_b1 .box1 li.on .con2{opacity: 0;}
	.pro_b1 .box1 li.on .con1{opacity: 1;transition:opacity 1s,transform 0.5s;transition-delay: 0.3s;transform: translateY(-35px);}
}
@media (min-width: 1199px) and (max-width: 1500px){
	.pro_b1 .box1 .con1{padding: 5px 58px;}
	.pro_b1 .box1 .con1 .title {font-size: 90px;}
	.pro_b1 .box1 .con2 .title{font-size: 66px;padding: 45px 5px;}
	
	.pro_dh li a {font-size: 42px;}
}

@media (min-width: 768px) and (max-width: 1199px){
	.pro_b1{padding-bottom: 120px;}
	.pro_b1 .box1 li>div{border-radius: 20px;}
	.pro_b1 .box1 .con1{padding: 0px 50px;}
	.pro_b1 .box1 .con1 .title {font-size: 68px;}
	.pro_b1 .box1 .con2 .title{font-size: 48px;padding: 35px 5px;}
	
	.pro_b2{padding-bottom: 80px;}
	.pro_dh {margin-top: 45px;}
	.pro_dh li {padding: 0 45px;}
	.pro_dh li:not(:first-child)::after {height: 53%;top: 27%;}
	.pro_dh li a {font-size: 34px;}
	
	.pro_list{margin-top: 40px;}
	.pro_list .box ul li {padding: 27px;}
}

@media (max-width: 860px){
	.pro_b1 .box1 .con1 {padding: 0px 35px;margin-bottom: -5px;}
	.pro_b1 .box1 .con1 .title {font-size: 48px;}
	.pro_b1 .box1 .con2 .title{font-size: 38px;padding: 30px 5px;}
	
	.pro_dh li {padding: 0 35px;}
	.pro_dh li a {font-size: 28px;}
}
@media (max-width: 767px){
	.pro_b1{padding-bottom: 80px;}
	.pro_b1 .box1{margin: 30px 0px 0 0px;}
	.pro_b1 .box1 ul{flex-wrap: wrap;}
	.pro_b1 .box1 li{flex: none;padding: 8px 0;}
	.pro_b1 .box1 li>div {border-radius: 15px;border-width: 2px;}
	.pro_b1 .box1 .img_img {height: 270px;}
	.pro_b1 .box1 .img_img::after{background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 15%, transparent);}
	.pro_b1 .box1 .con1{opacity: 1;padding: 30px;}
	.pro_b1 .box1 .con2{display: none;}
	.pro_b1 .box1 .con1 .title {font-size: 42px;line-height: 1.2;}
	
	.pro_b2{padding-bottom: 60px;}
	.pro_dh{margin: 35px -18px 0 -18px;}
	.pro_dh li {padding: 5px 18px;}
	.pro_dh li:not(:first-child)::after {height: 45%;top: 30%;}
	.pro_dh li a {font-size: clamp(18px, 5.7vw, 24px);}
	
	.pro_list {margin: 30px -15px 0 -15px;}
	.pro_list .box ul li {width: 50%;padding:15px 13px;}
}