
/* proType_system */
.system_inner{padding: 4.8% 0 0;}
.system_left{width: 22%;}
.system_right{width: calc(78% - 30px);}

.sort_list{position: sticky;}
.sort_list li{background: #D1D1D1; border-radius: 12px; margin-bottom: 20px; cursor: pointer;}
.sort_list li:last-child{margin-bottom: 0;}
.sort_list li .name{display: block; padding: 24px 24px; font-family: 'Humanist777BT-BlackCondensedB'; font-size: 22px; line-height: 1.35;}
.sort_list li.active_item, .sort_list li:hover{background: var(--commonColor); color: #fff;}

.system_right .system_div{display: none; opacity: 0;}

.listPro_list{padding: 0 0 0; flex-wrap: wrap;}
.listPro_list li{width: calc((100% - 52px) / 3); box-sizing: border-box; background: #fff; border-radius: 12px; margin-right: 26px;}
.listPro_list li:nth-child(3n){margin-right: 0;}
.listPro_list li>a{display: block; padding: 20px 30px 20px;}
.listPro_item{margin-bottom: 28px; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.29);}
.listPro_item .pro_pic{padding-bottom: 97%; overflow: hidden;}
.listPro_item .title{margin: 20px 0 0; font-size: 22px; font-family: 'Humanist777BT-BlackCondensedB'; line-height: 26px; text-align: center;}
.listPro_item .line{position: relative; height: 20px;}
.listPro_item .line::before{position: absolute; left: -30px; right: -30px; bottom: 0px; height: 2px; background: #D8D8D8; content: '';}

.listPro_item:hover .title{color: var(--commonColor);}
.listPro_item:hover{box-shadow: 0px 1px 6px 0 rgba(0, 0, 0, 0.4);}

@media only screen and (max-width: 1200px) {
	.sort_list li .name{font-size: 20px; padding: 16px 20px;}
	
	.listPro_item .title{font-size: 20px; }
	.listPro_list li{width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 20px;}
	.listPro_list li>a{padding: 16px 20px;}
	.listPro_item .line::before{left: -20px; right: -20px;}
}
@media only screen and (max-width: 950px) {
	.system_inner{padding: 20px 0 0; flex-direction: column;}
	.system_left{width: 100%;}
	.sort_list li{margin-bottom: 15px;}
	.sort_list li .name{padding: 12px 15px;}
	.system_right{width: 100%; margin-top: 20px;}
	
	.listPro_list li{width: 100%; margin: 0 0 20px;}
	.listPro_item{box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.2);}
	.listPro_list li:last-child{margin-bottom: 0;}
	.listPro_item .title{margin-top: 15px;}
}

/* proType_advantage */

.advantage_inner{padding-top: 3.5%;}
.adv_tab_list{width: 100%;}
.adv_tab_list li{width: calc(90% / 6); margin-right: 2%; border: 1px solid var(--commonColor); border-radius: 10px; text-align: center; padding: 20px 10px; cursor: pointer;}
.adv_tab_list li:last-child{margin-right: 0;}
.adv_tab_list li .def_img, .adv_tab_list li .act_img{height: 32px; margin: 0 auto; display: block;}
.adv_tab_list li .act_img{display: none; opacity: 0;}

.adv_tab_list li .name{font-size: 20px; font-family: 'Humanist777BT-BlackCondensedB'; color: var(--commonColor); margin-top: 10px; text-transform: capitalize; line-height: 1.2;}
.adv_tab_list li:hover img{animation: swing 0.5s;}
.adv_tab_list li:hover .def_img{display: none;}
.adv_tab_list li:hover .act_img{display: block; opacity: 1;}
.adv_tab_list li:hover{background: var(--commonColor);}
.adv_tab_list li:hover .name{color: #fff;}

.adv_tab_list li.active_item .def_img{display: none;}
.adv_tab_list li.active_item .act_img{display: block; opacity: 1;}
.adv_tab_list li.active_item{background: var(--commonColor);}
.adv_tab_list li.active_item .name{color: #fff;}

.adv_con_div{margin: 30px 0 0;}
.adv_con{line-height: 26px; color: #333; display: none;}
.adv_con p{padding-bottom: 15px;}
.adv_con p:last-child{padding-bottom: 0;}

@media only screen and (max-width: 950px) {
	.advantage_inner{padding-top: 5px;}
	.adv_tab_list{flex-wrap: wrap; justify-content: space-between;}
	.adv_tab_list li{width: 48%; padding: 15px 10px; margin-right: 0; margin-top: 15px;}
	.adv_tab_list li .def_img, .adv_tab_list li .act_img{height: 28px;}
	.adv_tab_list li .name{font-size: 18px; margin-top: 8px;}
	.adv_con_div{margin-top: 20px;}
}


/* proType_internal */
.internal_inner{padding: 4% 0;}
.internal_inner .internal_img{margin: 0 auto; max-width: 1140px; display: block; width: 100%;}
.internal_inner .internal_img:hover{
	animation: scale 1s;
}

@keyframes scale {
	0% {
		transform: scale(1);
		opacity: 1
	}

	50% {
		transform: scale(1.05);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@media only screen and (max-width: 950px) {
	.internal_inner{padding: 20px 0 30px;}
}

/* proType_customer */
.proType_customer .pro_th .title{text-align: center; border-bottom: none;}
.proType_customer .pro_th .title .txt{color: #fff; padding-bottom: 0;}
.proType_customer .pro_th .title .txt::before{height: 0;}

.customer_inner{padding: 4% 0 30px; position: relative;}
.customer_inner .swiper-slide:nth-child(2n){margin-top: 20px !important;}

.customer_item{padding: 20px 0; text-align: center; position: relative;}
.customer_item::before{position: absolute; bottom: 0; left: 50%; width: 0; background: #fff; content: ''; height: 2px;}

.customer_star .star_item{width: 20px; height: 20px; background: url(../img/icon_star.png) no-repeat center /20px auto; margin-right: 2px;}
.customer_star .star_item:last-child{margin-right: 0;}
.customer_item .title{color: #fff; font-family: 'Humanist777BT-BlackCondensedB'; margin: 15px 0;}
.customer_item .user_name{color: #fff; font-family: 'Humanist777BT-BlackCondensedB'; margin-top: 15px;}
.customer_item .brief{color: rgba(255, 255, 255, 0.6);}

.customer_item:hover::before{width: 60px; margin-left: -30px;}
.customer_item:hover .brief{color: rgba(255, 255, 255, 0.9);}

.customer-pagination .swiper-pagination-bullet{width: 20px; height: 6px; border-radius: 0; background: #F5F5F5;}
.customer-pagination .swiper-pagination-bullet-active{width: 20px; height: 6px; border-radius: 0; background: var(--commonColor);}

@media only screen and (max-width: 950px) {
	.customer_inner{padding: 10px 0 30px;}
	.customer_inner .swiper-slide:nth-child(2n){margin-top: 0 !important;}
	.customer_item{padding-bottom: 10px;}
	.customer_item .title{display: block; height: auto;}
	.customer_item .brief{display: block; height: auto;}
}
