.banner{width: 100%;height: auto;overflow: hidden;position: relative;}
.hov-div{position: absolute;bottom: 15%;width: 100%;text-align: center;}
.hov-div a{margin: 0 auto;border:2px solid #fff;background:rgba(0,0,0,0.2);color: #fff;font-size: 18px;box-sizing: border-box;padding:14px 8px;font-weight: bold;transition: .4s ease-out;border-radius: 2px;}
.hov-div a:hover{background-color:#DF1212;}
.banner>img{max-width: 100%;display: block;}
.wrap_box{width: 100%;height: auto;}
.case_tab{width: 80%;margin: 0 auto;margin-bottom: 40px;}
.title{padding: 30px 0;width:1200px;margin: 0 auto;position: relative;}
.title>h2{font-size: 40px;color: #000;font-family: "Calibri Light";}
.title>h3{font-size: 26px;color: #000;font-weight: bold;padding-top: 10px;padding-bottom: 20px;}
.case_case{
	display: flex;
	flex-wrap: wrap;
}
.case_con{width: 33.33%;float: left;position: relative;min-height: 100px;overflow: hidden;}
.cover{position: absolute;top: 0;background: rgba(0,0,0,0.5);width: 100%;height: 100%;box-sizing: border-box;padding: 14px;opacity: 0;transition: .5s ease-out;overflow: hidden;}
.case_con>img{width: 100%;display: block;transition: .5s ease-out;}
.childtop {
    position: absolute;
    left: 32px;
    bottom: 47px;
    width: 80%;
}
.childtop .chl_item0{font-size: 18px;color: #fff;font-weight: normal;width: 100%!important;padding-bottom: 4px;position: relative;padding-bottom: 25px;}
.childtop .chl_item0>.brline{position: absolute;width: auto;height: 30px;border-bottom: 1px solid #fff;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;display: -webkit-box;-webkit-line-clamp: 1;line-height: 30px;}
.childtop .chl_item1{font-size: 16px;color: #fff;width: 30%;margin-top: 10px;width: 100%;}
.childtop .chl_item1 span{display: block;font-size: 14px;}
.childcon{font-size: 22px;color: #fff;text-align: center;padding-top: 0px;font-weight: bold; position: absolute; left: 31px; top: 33px;}
.childbut{width: 10%;position: absolute;bottom: 48px;right: 32px;}
.childbut>img{max-width: 100%;display: block;}
.case_con:hover .cover{opacity: 1}
.case_con:hover>img{transform: scale(1.1);}
.case_tab .tab:hover{background:#a40000;}
.case_tab .tab:hover h2{color: #fff!important;}
.case_tab .tab:hover span{color: #fff!important;}
.case_tab .tab:hover .caline{width: 80%;transition: .6s ease-out;}
.case_tab .tab{width: 15%;float: left;border:1px solid #a40000;box-sizing: border-box;margin: -1px -1px 0 0;text-align:center;cursor: pointer;transition: .5s ease-out;margin-right: 2%;text-align: left;}
.case_tab .tab:last-child{margin-right: 0;}
.case_tab .tab a{display: block;padding:10px 0;}
.case_tab .tab h2{color:#a40000;font-size: 18px;font-weight: bold;padding: 4px;}
.caline{width:0;height: 2px;background: #fff;display: block;margin-top: 6px;}
.case_tab .tab span{color:#a40000;font-size: 12px;font-weight: bold;padding: 4px;box-sizing: border-box;text-transform: uppercase;}
.active{background:#a40000;}
.active h2{color: #fff!important;}
.active span{color: #fff!important;}
.active .caline{width: 80%;}
.fen{width: 15%;margin: 0 auto;margin-top: 70px;}
.wrap_box .title .line{}
.main{position: relative;padding-bottom: 60px;}
.cline38{position: absolute;bottom: 0;height: 1px;background: #dcdddd;width: 100%;}
.line2{height: 22px;line-height: 22px;font-style: normal;box-sizing: border-box;padding: 0 4px;border:1px solid #a40000;background-color: #fff;transition: .3s ease-out;}
.line2:hover{background-color: #a40000;}
.line2:hover a{color: #fff;}
.the-one{font-size: 16px!important;}

.case-navs{
	max-width: 100%;
	display: flex; 
	justify-content: center;
	align-items: center;
	margin: 10px 0;
}
.case-navs div{
	cursor: pointer;
}
.case-q,.case-f,.case-h{
	font-size: 14px;
    width: 188px;
    height: 40px;
    line-height: 40px;
    margin: 0 30px;
    border: 1px solid #B9B8B8;
    max-width: 188px;
    padding: 5px 10px;
    
}
.case-q{
	border: 2px solid #a40000;
	background: #a40000;
	color: #fff;
}
.case-q a{
	color: #fff;
}
.case-f,.case-h{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #808080;
}
.case-f div{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.case-h div{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.case-f a{
	color: #808080;
}
.case-h a{
	color: #808080;
}
.sace-nan-show{
	position: absolute;
	left: -1px;
	top: 100%;
	width: 100%;
	border: 1px solid #B9B8B8;
	z-index: 1000;
	display: none;

}
.sace-nan-show li{
	width: 100%;
	text-align: center;
	background: #fff;
}
.sace-nan-show li:hover{
	background: #eee;
	
}
@media(max-width: 1200px){
	.title{width: 100%;}
	.case_con{width: 25%;}
	.more{width: 20%;}
	.pub_nav{width: 45%;}
	.case_tab .tab{min-height: 94px;}
}

@media(max-width: 768px){
	.fen{width: 50%;padding:20px 0;margin-top: 25px;}
	.title{padding: 20px 0;}
	.case_con{width: 50%;}
	.childtop .chl_item0{font-size: 16px;}
	.childtop .chl_item1{font-size: 14px;}
	.cover{padding: 4px;}
	.childcon{padding-top: 20px;font-size: 16px;}
	.navigation_item{width: 40%;}
	.case_tab .tab{margin: 0;padding: 0;}
	.case_tab .tab span{display: none;}
	.case_tab .tab h2{font-size: 16px;}
	.case_tab{width: 100%;margin-bottom: 10px;}
	.case_tab .tab{width: 33.333%;min-height: 0px;}
	.main{padding-bottom: 25px;}
	.childtop .chl_item0{width: 40%;}
	.banner>img{width: 150%;margin-left: -25%;max-width: 150%;}	
	.hov-div{bottom: 6%;}
	.hov-div a{padding: 2px 4px;}
	.case_tab .tab a{padding: 4px 0;position: relative;z-index: 999;}
	.case_tab .tab:hover .caline{width: 0%;transition: .6s ease-out;}
}
@media(max-width: 414px){
	.case-q, .case-f, .case-h{
		margin: 0 10px;
	}
}
@media(max-width: 350px){
	.childbut{padding-top: 10px;}
	.case_con{width: 100%;}
	.childcon{padding-top: 75px;}
}

@media(max-width: 320px){
	.case-q, .case-f, .case-h{
		margin: 0 3px;
	}
}