.case{height: 937px;}
.case .bgImg{width: 100%;height: 100%;}

.case .con{background-color: rgba(0,0,0,0.5);overflow: hidden;}
.case .item{border-left: 1px solid #fff;box-sizing: border-box;writing-mode: vertical-lr;color: #fff;transition: all 0.5s;}
.case .conP .item{height: 100%;float: left;}
.case .item:nth-child(1){border: none;}
.case .item .txt{top: 80%;left: 43%;transition: all 0.5s;}
.case .item .p1{font-size: 16px;}
.case .item .p2{font-size: 20px;}
.case .conM{display: none;}
.case .conM .item{width: 100%;display: block;}


/* 更多案例 */
.caseMore .part{padding: 40px 100px;height: 837px;}
.caseMore .part .img{margin: 0 2% 30px 0;width: 32%;height: 305px;overflow: hidden;}
.caseMore .part .img img{width: 100%;height: 100%;transition: all 0.8s;}
.caseMore .part .img:nth-child(3n){margin-right: 0;}
.caseMore .part .img .mask{background-color: rgba(0,0,0,0.7);color: #fff;line-height: 1;padding: 50px 30px;opacity: 0;transition: all 0.5s;}
.caseMore .part .img:hover .mask{opacity: 1;}
.caseMore .part .img:hover .caseMoreImg{transform: scale(1.3);}
.caseMore .partBox{min-height: 650px;}
.caseMore .part .page{padding: 60px 0;background-color: #fff;}
.caseMore .mask .linkIcon{width: 70px;height: 50px;background-color: rgba(96,96,96,0.6);position: absolute;bottom: 0;right: 0;}
.caseMore .mask .linkIcon img{width: 30px;height: 30px;margin: auto;}


/* 案例详情页 */
.caseDet{padding: 26px 100px 0;}
.caseDet .title{padding: 30px 0;border-bottom: 1px dashed #E1E1E1;}
.caseDet h1,.caseDet h5{line-height: 1;}
.caseDet h1{padding-bottom: 20px;font-size: 22px;}
.caseDet h5{font-size: 14px;color: #999;}
.caseDet .caseCon{padding: 60px 0 140px;}
.caseDet h3{border-left: 2px solid #333;color: #333;text-indent: 10px;line-height: 1;margin: 90px 0 30px;font-weight: bold;}
.caseDet .caseTxt{line-height: 30px!important;font-size: 14px;}
.caseDet .caseTxt img{max-width: 100%;height: auto;}


/* 自适应 */
@media only screen and (max-width: 1800px) {
	html,body,#app{height: 100%;}
	.case{height: 100%;display: flex;justify-content: center;overflow: hidden;}
	.case .bgImg{height: 100%;width: auto;}
	
	.caseMore{}
	.caseMore .part{flex: 1;height: initial;box-sizing: border-box;}
	.caseMore .partBox{min-height: 500px;}
	.caseMore .part .img{height: 270px;}
}

@media only screen and (max-width: 1600px){
	.caseMore .part .img{height: 250px;}
	.caseMore .part .img .mask h1{font-size: 22px;}
	.caseMore .part .img .mask p{font-size: 14px;}
	
	.caseDet{padding: 50px;}
}

@media only screen and (max-width: 1440px){
	.caseMore .part .img{height: 230px;}
}

@media only screen and (max-width: 1280px){
	.caseMore .part .img{height: 190px;float: left;}
	.caseMore .part .img .mask h1{font-size: 20px;padding-bottom: 30px;}
	.caseMore .part .img .mask p{font-size: 12px;padding-bottom: 0;margin-bottom: 10px;}
	.caseMore .part{padding: 20px 50px;}
	.caseMore .partBox{display: block;overflow: hidden;}
}

@media only screen and (max-width: 1100px) {
	.case .item .txt{left: 35%!important;}
	.caseMore .part .img{height: 170px;}
}

@media only screen and (max-width: 1000px){
	
}

@media only screen and (max-width: 960px) {
	.caseMore .part{padding: 20px 30px;}
	.caseMore .part .img{height: 170px;}
	.head{margin: 0;overflow: hidden;height: auto;padding: 0;}
	.headList{overflow: hidden;float: initial;padding: 30px;}
	.headLi{padding: 0 10px;}
	.caseMore .part .img .mask{padding: 25px 20px;}
}

@media only screen and (max-width: 750px) {
	.case .conP{display: none;}
	.case .conM{display: block;}
	.case .con{height: 100%;}
	.case .item{border-top: 1px solid #fff;writing-mode: initial;width: 100%!important;border-left:none;}
	.case .item .txt{top: 30%;left: 20%!important;}
	
	.caseMore .part .img{height: 200px;width: 48%;margin-right: 4%;}
	.caseMore .part .img:nth-child(3n){margin-right: 4%;}
	.caseMore .part .img:nth-child(2n){margin-right: 0;}
	.caseMore .part .img .mask{padding: 30px 20px;}
	.caseMore .part .img .mask h1{font-size: 20px;padding-bottom: 20px;}
	.caseMore .part .img .mask p{font-size: 12px;}
	.caseMore .mask .linkIcon{width: 50px;height: 30px;}
	.caseMore .mask .linkIcon img{width: 20px;height: 20px;}
}

@media only screen and (max-width: 600px) {
	.caseMore .part .img{height: 170px;}
	
	.headList{padding: 20px;padding-bottom: 10px;}
}

@media only screen and (max-width: 500px) {
	.caseMore .part .img{height: 150px;}
	.caseDet{padding: 20px;}
	.caseDet .title{padding: 30px 0;}
	.caseDet .caseCon{padding: 30px 0 50px;}
	.caseDet h3{margin: 50px 0 20px;}
	
	.caseDet .caseTxt{overflow: hidden;}
}

@media only screen and (max-width: 414px) {
	.caseMore .partBox{min-height: 450px;}
	.caseMore .part{padding: 0 10px 20px;}
	.caseMore .part .img{height: 130px;margin-bottom: 10px;margin-right: 2%;width: 49%;}
	.caseMore .part .img:nth-child(3n){margin-right: 2%;}
	.head{height: auto;padding: 20px 10px;}
	.caseDet{padding: 20px 10px;}
	
	.case .item .p1{font-size: 12px;}
	.case .item .p2{font-size: 14px;}
	
	.caseMore .part .page{padding: 50px 0;}
}

@media only screen and (max-width: 320px) {
	.caseMore .partBox{min-height: 350px;}
	.caseMore .part .img{height: 105px;}
	.caseMore .part .img .mask{padding: 15px;}
	.caseMore .part .img .mask h1{font-size: 16px;padding-bottom: 10px;}
}