
.listPro_list{padding: 30px 0 0; flex-wrap: wrap;}
.listPro_list li{width: calc((100% - 32px) / 3); box-sizing: border-box; padding: 26px 24px; background: #fff; border-radius: 20px; margin-right: 16px; box-shadow: 4px 4px 16px 0px rgba(var(--comColorRgb), 0.15);}
.listPro_list li:nth-child(3n){margin-right: 0;}
.listPro_item{margin-bottom: 16px;}
.listPro_item .pro_pic{padding-bottom: 95%; overflow: hidden; border-radius: 16px;}
.listPro_item .title{margin: 14px 0; line-height: 1.25; text-align: center; height: 3.75em; font-size: 22px; font-weight: bold;}
.listPro_item .more_btn{text-align: center;}
.listPro_item:hover .title, .listPro_item:hover .title a{color: var(--commonColor);}
.listPro_item:hover{box-shadow: 4px 4px 16px 0px rgba(var(--comColorRgb), 0.3);}
.listPro_item:hover .moreBtn{color: var(--commonColor); border-color: var(--commonColor);}


@media only screen and (max-width: 1450px) {
	.listPro_item .title{font-size: 22px;}
}
@media only screen and (max-width: 1300px) {
	.listPro_list li{padding: 22px 20px;}
	.listPro_item .title{font-size: 20px;}
}
@media only screen and (max-width: 1100px) {
	.listPro_list li{padding: 16px 16px; width: calc((100% - 16px) / 2);}
	.listPro_list li:nth-child(3n){margin-right: 16px;}
	.listPro_list li:nth-child(2n){margin-right: 0;}
}
@media only screen and (max-width: 950px) {
	.listPro_list{padding-top: 24px;}
	.listPro_list li{width: 100%; margin: 0 0 20px; padding: 20px 15px 24px;}
	.listPro_list li:last-child{margin-bottom: 10px;}
	.listPro_item .title{margin: 14px 0 10px; display: block; height: auto; font-size: 20px;}
}


/* listPro_com */
.com_list li{margin-right: 3%;}
.com_list li:last-child{margin-right: 0;}
.com_list li img{background: #fff;}

.com_list li:hover img{animation: jump 0.5s;}

@media only screen and (max-width: 950px) {
	.com_list{flex-wrap: wrap;}
	.com_list li{margin-top: 8px; margin-bottom: 8px;}
	.com_list li img{height: 46px;}
}

/* listPro_medical */

.medical_left{width: 46%; min-height: 460px;}
.medical_left .pic{height: 100%; border-radius: 12px;}
.medical_right{width: calc(54% - 18px); box-sizing: border-box; padding: 2.2% 2.8%; border-radius: 12px; background: rgba(var(--comColorRgb), 0.15);}

.med_th .stitle{font-size: 20px; line-height: 1.5; color: var(--commonColor); font-weight: bold; text-transform: capitalize;}
.med_th .title{font-size: 48px; line-height: 1.2; font-weight: bold; text-transform: capitalize; margin-top: 20px;}

.medical_inner{position: relative; padding-bottom: 35px; margin-top: 25px;}
.medical_inner .swiper-slide{height: auto;}
.medical_item{background: #fff; padding: 30px 22px 24px; border-radius: 12px; height: 100%;}
.medical_info .pic{width: 76px; height: 76px; border: 1px solid var(--commonColor); border-radius: 50%; margin-right: 14px; padding: 6px;}
.medical_info .title{flex: 1; font-size: 24px; font-weight: bold; line-height: 1.25; width: calc(100% - 90px);}
.medical_item .brief{color: #777; line-height: 26px; margin: 8% 0; max-height: 104px; overflow-y: auto;}
.med_btn a{display: inline-block; height: 42px; line-height: 42px; padding: 0 16px; background: #333; color: #fff; font-weight: bold; border-radius: 30px; margin-right: 8px; margin-bottom: 15px;}
.med_btn a:hover{background: var(--commonColor);}
.med_btn a:last-child{margin-right: 0;}
.med_btn a:first-child{padding: 0 19px;}

.swiper-container-horizontal>.medical-scrollbar{height: 9px; background: #D9D9D9; border-radius: 0; left: 18px; right: 18px; width: auto;}
.medical-scrollbar .swiper-scrollbar-drag{border-radius: 0; background: var(--commonColor);}

@media only screen and (max-width: 1450px) {
	.med_th .title{font-size: 40px;}
	.medical_right{padding: 28px;}

.listPro_item 	.ellipsis3{   height: 6.75em !important;   -webkit-line-clamp: 5 !important;}
}
@media only screen and (max-width: 1350px) {
	.med_th .title{font-size: 34px;}
	.medical_right{padding: 24px;}
	.medical_item{padding: 24px 16px 20px;}
	.medical_info .title{font-size: 22px; width: calc(100% - 76px);}
	.medical_info .pic{width: 66px; height: 66px; margin-right: 10px;}
}
@media only screen and (max-width: 1200px) {
	.med_th .title{font-size: 30px;}
	.medical_info .title{font-size: 20px;}
}
@media only screen and (max-width: 950px) {
	.med_th .title{font-size: 26px; margin-top: 12px;}

	.listPro_medical .layout{flex-direction: column;}
	.medical_left{width: 100%; min-height: unset;}
	.medical_left .pic{height: 0; padding-bottom: 80%;}
	.medical_right{width: 100%; margin-top: 20px; padding: 24px 16px;}
	.medical_inner{margin-top: 18px; padding-bottom: 32px;}
}







