.tab_list li .txt::before{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
/* cases_tab */
.cases_tab{border-bottom: 1px solid #E8E8E8; padding: 40px 0 24px;}
.tab_list li{font-family: 'Humanist777BT-BlackCondensedB'; font-size: 24px; margin-right: 4%;}
.tab_list li:last-child{margin-right: 0;}
.tab_list li .txt{display: block; color: #000; padding: 0 0 8px; position: relative;}
.tab_list li .txt::before{position: absolute; left: 0; bottom: 0; height: 3px; width: 0; content: '';}
.tab_list li.active .txt{color: var(--commonColor);}
.tab_list li.active .txt::before{background: var(--commonColor); width: 90%;}
.tab_list li .txt:hover{color: var(--commonColor);}
.tab_list li .txt:hover::before{background: var(--commonColor); width: 90%;}

@media only screen and (max-width: 950px) {
	.cases_tab{padding: 30px 0 20px;}
	.tab_list{flex-direction: column;}
	.tab_list li{width: 100%; margin-right: 0; line-height: 28px; margin-bottom: 15px;}
	.tab_list li:last-child{margin-bottom: 0;}
	.tab_list li.active .txt::before, .tab_list li .txt:hover::before{width: 50%;}
}

/* case_th */
.case_th .title{font-family: 'Humanist777BT-BlackCondensedB'; font-size: 45px; color: var(--commonColor); position: relative; line-height: 1.25; padding-bottom: 8px;}
.case_th .title::before{position: absolute; left: 0; bottom: 0; height: 3px; background: var(--commonColor); width: 90px; z-index: 1; content: '';}
.case_th .title::after{position: absolute; left: 0; bottom: 0; height: 3px; background: #E8E4E3; width: 130px; z-index: 0; content: '';}

.case_th .brief{line-height: 24px; color: #666; margin-top: 15px;}

.cases_box{margin-top: 2.5%;}
.case_list li{width: 32%; margin-right: 2%; margin-top: 36px; border: 1px solid #E8E4E3;}
.case_list li:nth-child(3n){margin-right: 0;}

.case_item .case_info{padding: 15px;}
.case_item .case_pic{padding-bottom: 58%;}
.case_item .title{font-family: 'Humanist777BT-BlackCondensedB'; font-size: 20px; margin: 6px 0; line-height: 28px; height: 56px;}
.case_item .brief{color: #666; line-height: 24px;}

.case_item:hover{box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);}

@media only screen and (max-width: 1550px) {
	.case_th .title{font-size: 42px;}
}
@media only screen and (max-width: 1450px) {
	.case_th .title{font-size: 38px;}
}
@media only screen and (max-width: 1350px) {
	.case_th .title{font-size: 34px;}
}
@media only screen and (max-width: 1200px) {
	.case_th .title{font-size: 30px;}
}
@media only screen and (max-width: 950px) {
	.cases_box{margin-top: 30px;}
	.case_th .title{font-size: 26px;}
	.case_list li{width: 100%; margin-right: 0; margin-top: 20px;}
	.case_item .title{display: block; height: auto;}
	.case_item .brief{display: block; height: auto;}
}