.cases-big-col {
	width: 38.9323vw;
	height: 38.2813vw;
	padding: 1.888vw 5.5339vw 2.6693vw 5.5339vw;
}

.cases-col-1 {
	background-image: url(img/cases-1.jpg);
	background-size: cover;
}

.cases-row>div:not(:first-child) {
	margin-left: .4557vw;
}

.cases-base-col {
	background-size: cover;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cases-base-col .cases-icon {
	text-align: center;
}

.cases-col-2 {
	background-image: url(img/cases-2.jpg);

}

.cases-col-3 {
	background-image: url(img/cases-3.jpg);
}

.cases-col-4 {
	background-image: url(img/cases-4.jpg);
}

.cases-bg {
	display: none;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, #0697d0, #2fe79d);
	padding: 3.776vw 1.9531vw 0px 2.2786vw;
	transition: all 1s linear;
}

.cases-bg .title {
	color: #fff;
	font-size: 1.237vw;
	display: inline-block;
	border-bottom: .1302vw solid #fff;
	padding-bottom: .9766vw;
	margin-bottom: 2.6042vw;
}

.cases-img-list {
	/* display: flex;
	flex-wrap: wrap; */
	column-count: 2;
	column-gap: .3255vw;
}

.cases-img-list .cases-img-block {
	/* width: 50%; */
	margin-bottom: .3255vw;
	position: relative;
	height: 6.5104vw;
}

.cases-img-list .cases-img-block::before {
	position: absolute;
	content: '';
	width: 0%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #000;
	opacity: .6;
	-webkit-transition: .5s all ease;
	transition: .5s all ease;
}

.cases-img-list .cases-img-block::after {
	position: absolute;
	content: '';
	width: 0%;
	height: 100%;
	right: 0;
	top: 0;
	background-color: #000;
	opacity: .6;
	-webkit-transition: .5s all ease;
	transition: .5s all ease
}

.cases-img-list .cases-img-block:hover:before {
	width: 50%
}

.cases-img-list .cases-img-block:hover:after {
	width: 50%
}
.cases-img-list .cases-img-block:hover .cases-desc{
	display: block!important;
	animation: casesDescShow 1s forwards;
}
.cases-img-block .cases-desc{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    z-index: 999;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0px .651vw;
	font-size: .8464vw;
}

.cases-img-block img{
	height: 100%;
	width: 100%;
}
.cases-bg .detail-link {
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 5px;
	width: 7.487vw;
	height: 2.0833vw;
	background-size: contain;
	margin-top: 4.0365vw;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: relative;
	color: #fff;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
	cursor: pointer;
}

.cases-bg .detail-link span {
	font-size: .9115vw;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #fff;
}

.cases-bg .detail-link img {
	width: 1.6276vw;
	height: .3906vw;
}

.cases-row {
	display: flex;
	height: 38.2813vw;
}

.cases-base-col .label {
	margin-top: .3906vw;
	font-size: 1.237vw;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
}

.cases-col .cases-col-img .label {
	margin-top: .3906vw;
	font-size: 1.237vw;
}
.cases-bg .detail-link:hover{
	animation: btnRotate 0.7s ease-in-out both;
}
.cases-bg .detail-link:after {
	background: #2fe79d;
	content: "";
	height: 10.0911vw;
	left: -4.8828vw;
	opacity: .4;
	position: absolute;
	top: -3.2552vw;
	transform: rotate(35deg);
	transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
	width: 3.2552vw;
	z-index: -10;
}

.cases-bg .detail-link:hover:after {
	left: 120%;
	transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.cases-banner {
    position: relative;
}
.cases-banner img{
	width: 100%;
}
.cases-banner .container{
    position: absolute;
    bottom: 5.9211vw;
    left: 0;
    right: 0;
}
.cases-banner .title {
	font-size: 3.8158vw;
	font-weight: 800;
	color: #FFFFFF;
}

.cases-banner .sub-title {
	font-size: 1.3672vw;
	font-weight: 900;
	color: #FFFFFF;
	font-family: HarmonyOS Sans;
	display: flex;
	align-items: center;
}

.cases-banner .line {
	display: inline-block;
	margin-left: .9211vw;
	width: 4.6053vw;
	height: .1316vw;
	background-color: #FFFFFF;
}
.subcases-area{
	margin-top: 4.5573vw;
}
.subcases-area .nav-title{
	font-size: 2.5vw;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #383838;
	margin-bottom: 3.3553vw;
	margin-top: 3.3553vw;
	text-align: center;
}
.subcases-area .cases-list{
	display: flex;
	flex-wrap: wrap;
}
.subcases-area .cases-col{
	width: 25%;
	margin-bottom: 2.6316vw;
	height: 17.0395vw;
}
.subcases-area .cases-col .img-area{
	overflow: hidden;
	height: 100%;
}
.subcases-area .cases-col img{
	transition: all 0.6s;
	z-index: 8;
	height: 100%;
    width: 100%;
}
.subcases-area .cases-col:hover img{
	transform: scale(1.2);
}

.subcases-area .cases-col:nth-child(4n+1){
	padding-right: 2.3438vw;
}
.subcases-area .cases-col:nth-child(4n+2){
	padding-left: .7813vw;
	padding-right: 1.5625vw;
}
.subcases-area .cases-col:nth-child(4n-1){
	padding-left: 1.5625vw;
	padding-right: .7813vw;
}
.subcases-area .cases-col:nth-child(4n){
	padding-left: 2.3438vw;
}
.subcases-area .cases-col .title{
	z-index: 10;
	height: 4.1447vw;
	background: rgba(0,0,0,0.5);
	color: #fff;
	font-size: .9211vw;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0px 1.5789vw;
	bottom: 0px;
    width: 100%;
    position: absolute;
	
}
.subcases-area .cases-col .title span:first-child{
	white-space: nowrap;
    text-overflow: ellipsis;
	overflow: hidden;
	flex:1;
	margin-right: .651vw;
}
.subcases-area .cases-col:hover .title{
	background: linear-gradient(to right, #0697d0, #2fe79d);

}
.subcases-area .cases-col .title a{
	color: #fff;
	font-size: .8553vw;
	opacity: 0.8;
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.subcases-area .cases-col .title .iconfont{
	font-size: .7895vw;
}
.subcases-area .page-area{
	margin-bottom: 3.2895vw;
	text-align: center;
}

.subcases-area .cases-col .col-inner{
	position: relative;
	height: 100%;
}

.cases-detail-area{
	padding-top: 5.2632vw;
	padding-bottom: 6.5789vw;
	background: #F9F9F9;
}
.cases-detail-area p{
	line-height: 1.8421vw;
	margin-bottom: 0px;
	text-align: justify;
}
.cases-detail-area .detail-container .title {
	font-size: 2.6316vw;
	font-weight: bold;
	text-align: center;
	margin: 1.3158vw 0px;
	color: #333;
}
.cases-detail-area li{
	list-style-type: none;
}
.cases-detail-area li::before{
	content: " ";
    width: .3906vw;
    height: .3906vw;
    background: linear-gradient(to right, #0697d0, #2fe79d);
    display: inline-block;
    border-radius: 50%;
    margin-right: .651vw;
}
.cases-detail-area .content-block{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: .651vw;
}
.cases-detail-area .block-col{
	width: 50%;
    padding: .6579vw;
}
.cases-detail-area .block-col:nth-child(2n+1){
	padding-left: 0px;
}
.cases-detail-area .block-col:nth-child(2n){
	padding-right: 0px;
}
.cases-detail-area .block-item{
	width: 100%;
    padding: 1.9737vw 2.6316vw 1.9737vw 1.9737vw;
    background: #fff;
    height: 19.0132vw;
    box-shadow: 0px 0px .6579vw rgb(0 0 0 / 10%);
}
.cases-detail-area .item-title{
	font-size: 1.25vw;
	color: #333;
	border-bottom: 1px solid #C7F0ED;
	padding-bottom: .7895vw;
	margin-bottom: .7895vw;
}
.cases-detail-area .item-content{
	font-size: .9211vw;
	color: #666;
	line-height: 1.8421vw;
}
.cases-detail-area .img-item{
	width: 100%;
    height: 100%;
	overflow: hidden;
    box-shadow: 0px 0px .651vw rgb(0 0 0 / 10%);
}
.cases-detail-area .img-block{
	display: flex;
}
.cases-detail-area .img-item img{
	transition: all 0.5s;
	width: 100%;
	height: 100%;

}
.cases-detail-area .img-item img:hover{
	transform:scale(1.2);
}
.cases-detail-area .item-content ul{
	padding-left: 0px;
}
.cases-detail-area .item-content ul li::marker{
	color:#0697d0;;
}
.img-grid{
	height: 38.0208vw;
	display: grid;
	grid-template-columns:50% 50%;
	grid-template-rows: 50% 50%; 
	justify-content: center;
	grid-template-areas: "a b"
						"a e";
}
.img-grid .img-col:nth-child(1){
	grid-area:a;
	padding-right: .651vw;
}
.img-grid .img-col:nth-child(2){
	grid-area: b;
	padding-left: .651vw;
	padding-bottom: .651vw;
}
.img-grid .img-col:nth-child(3){
	grid-area: e;
	padding-left: .651vw;
	padding-top: .651vw;
}
.back-list {
    margin: 2.9948vw 0px 1.9531vw 0px;
    text-align: right;
}
.back-list a {
    color: #333;
    font-size: .9115vw;
}
.detail-container .bottom-line{
	background: linear-gradient(to right, #0697d0, #2fe79d);
	width: 100%;
	height: .0651vw;
	margin-bottom: 1.9531vw;
}
.bottom-list{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.bottom-list .content-label{
	color: #333;
	font-size: .9115vw;
	margin-right: .651vw;
}
.bottom-list .content-value{
	color: #666;
	font-size: .9115vw;
}
@keyframes btnRotate {
	0% {
		transform: rotate(0deg) translate3d(0, 0, 0);
	}

	25% {
		transform: rotate(3deg) translate3d(0, 0, 0);
	}

	50% {
		transform: rotate(-3deg) translate3d(0, 0, 0);
	}

	75% {
		transform: rotate(1deg) translate3d(0, 0, 0);
	}

	100% {
		transform: rotate(0deg) translate3d(0, 0, 0);
	}
}
@keyframes casesDescShow{ /*设置内容由显示变为隐藏*/

	0%{opacity: 0;}
 
	50%{opacity: 0.5;}
 
	100%{opacity: 1;}
 
 }