/* service_top_box */
.service_top_box{background: #F5F5F5; padding: 5.6% 0;}

.ser_th{text-align: center;}
.ser_th .title{font-size: 60px; color: #000; font-family: 'Humanist777BT-BlackCondensedB'; line-height: 1.1;}
.ser_th .title a{color: inherit;}
.ser_th .title a:hover{color: var(--commonColor);}
.ser_th .brief{color: var(--commonColor); font-size: 20px; line-height: 1.5; margin-top: 2.5%;}

@media only screen and (max-width: 1550px) {
	.ser_th .title{font-size: 54px;}
}
@media only screen and (max-width: 1450px) {
	.ser_th .title{font-size: 48px;}
}
@media only screen and (max-width: 1350px) {
	.ser_th .title{font-size: 42px;}
}
@media only screen and (max-width: 1200px) {
	.ser_th .title{font-size: 36px;}
}
@media only screen and (max-width: 950px) {
	.service_top_box{padding: 30px 0;}
	.ser_th .title{font-size: 26px;}
}

/* service_box */
.service_box{margin-top: 26px;}

.service_first{background: #F5F5F5;}
.service_left{width: 50%; min-height: 400px;}
.service_left .ser_pic{height: 100%;}
.service_first .service_info{width: 44%; margin-right: 2%; box-sizing: border-box; padding: 3% 0 2%;}
.service_info .ser_star{margin: 10px 0;}
.ser_star .star_item{width: 20px; height: 20px; background: url(../img/icon_star1.png) no-repeat left center/20px auto;}

.service_info .title{font-family: 'Humanist777BT-BlackCondensedB'; font-size: 36px; color: #000; line-height: 1.25; margin-bottom: 20px;}
.service_info .brief{color: #666; font-size: 18px; line-height: 1.6; max-height: 16em; overflow-y: auto;}
.service_user{margin-top: 5%;}
.service_user .user{padding-left: 30px; color: #000; font-family: 'Humanist777BT-BlackCondensedB'; font-size: 20px; position: relative;}
.service_user .user::before{display: block; width: 20px; height: 20px; border-radius: 50%; background: url(../img/icon_ri.png) no-repeat center; background-size: 15px auto; background-color: var(--commonColor); content: ''; position: absolute; left: 0; top: 0; margin-top: 5px;}
.service_user .date{color: #666;}

.service_inner{margin-top: 6px;}

.service_list li{width: calc((100% - 60px) / 4); margin-right: 20px; margin-top: 20px; border: 1px solid #E3E3E3; border-radius: 5px; height: auto;}
.service_list li:nth-child(4n){margin-right: 0;}


.service_item .ser_pic{padding-bottom: 65%; border-radius: 5px 5px 0 0; margin: -1px -1px 0 -1px; width: calc(100% + 2px);}
.service_item .service_info{padding: 5px 15px 16px;}
.service_item .service_info .brief{line-height: 24px; height: auto; overflow-y: unset;}

.service_item:hover{box-shadow: 0px 4px 4px 0px rgba(var(--comColorRgb), 0.3);}

@media only screen and (max-width: 1550px) {
	.ser_th .title{font-size: 42px;}
	.service_info .title{font-size: 34px;}
}
@media only screen and (max-width: 1450px) {
	.ser_th .title{font-size: 38px;}
	.service_info .title{font-size: 32px;}
	.service_inner .service_user .user{height: 60px;}
}
@media only screen and (max-width: 1350px) {
	.ser_th .title{font-size: 34px;}
	.service_info .title{font-size: 30px;}
}
@media only screen and (max-width: 1200px) {
	.ser_th .title{font-size: 30px;}
	.service_info .title{font-size: 28px;}
	.service_user{flex-direction: column; align-items: flex-start;}
	.service_user .user{width: 100%;}
	.service_user .date{margin-top: 6px;}
}
@media only screen and (max-width: 950px) {
	.service_box{margin-top: 30px;}
	.case_th .title{font-size: 26px;}
	.ser_th .brief br{display: none;}
	.service_user{flex-direction: row; align-items: center;}
	.service_inner .service_user .user{height: auto;}
	
	.service_first{flex-direction: column;}
	.service_left{width: 100%; min-height: unset;}
	.service_left .ser_pic{height: 0; padding-bottom: 75%;}
	.service_first .service_info{width: 100%; margin: 0; padding: 15px 15px 20px;}
	.service_info .title{font-size: 24px; margin-bottom: 10px;}
	.service_info .brief{height: auto; max-height: unset; overflow: hidden; display: block;}
	.service_list li{width: 100%; margin-right: 0; margin-top: 20px;}
	.service_item .service_info .brief{display: block; height: auto; overflow: hidden;}
}