html,
body {
	min-width: 1300px;
	margin: 0;
	padding: 0;
	position: relative;
	background: #F8F8F8;
}

.cl2Img01 {
	width: 100%;
	overflow: hidden;
	/* height: 600px; */
	display: block;
	object-fit: cover;
	margin-top: 90px;
}

.cases-list-o {
	display: block;
	width: 100%;
	height: 940px;
	background: #3B3B3B;
	position: relative;
	overflow: hidden;
}

.cases-list-o-c {
	display: block;
	width: 1170px;
	height: 940px;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	z-index: 1;
}

.cases-list-o-c-img {
	display: block;
	height: 940px;
	position: absolute;
	overflow: hidden;
	left: 50%;
	top: 0;
	transform: translate(-50%, 0);
	/* background: #fff; */
}

.cl2ImgL {
	position: absolute;
	left: 0;
	top: 437px;
	transform: rotate(180deg);
}

.cl2ImgR {
	position: absolute;
	right: 0;
	top: 437px;
}

.cl2ImgLN {
	position: absolute;
	left: 0;
	top: 437px;
}

.cl2ImgRN {
	position: absolute;
	right: 0;
	top: 437px;
	transform: rotate(180deg);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 1300px) {
	.cases-list-o-c-img {
		width: 1300px;
	}

	.cl2ImgL {
		width: 36px;
		height: 36px;
	}

	.cl2ImgR {
		width: 36px;
		height: 36px;
	}

	.cl2ImgLN {
		width: 36px;
		height: 36px;
	}

	.cl2ImgRN {
		width: 36px;
		height: 36px;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 1300px) {
	.cases-list-o-c-img {
		width: 1300px;
	}

	.cl2ImgL {
		width: 36px;
		height: 36px;
	}

	.cl2ImgR {
		width: 36px;
		height: 36px;
	}

	.cl2ImgLN {
		width: 36px;
		height: 36px;
	}

	.cl2ImgRN {
		width: 36px;
		height: 36px;
	}
}

@media only screen and (min-width: 1400px) {
	.cases-list-o-c-img {
		width: 1400px;
	}

	.cl2ImgL {
		width: 66px;
		height: 66px;
	}

	.cl2ImgR {
		width: 66px;
		height: 66px;
	}

	.cl2ImgLN {
		width: 66px;
		height: 66px;
	}

	.cl2ImgRN {
		width: 66px;
		height: 66px;
	}
}

@media only screen and (min-width: 1450px) {
	.cases-list-o-c-img {
		width: 1448px;
	}

	.cl2ImgL {
		width: 66px;
		height: 66px;
	}

	.cl2ImgR {
		width: 66px;
		height: 66px;
	}

	.cl2ImgLN {
		width: 66px;
		height: 66px;
	}

	.cl2ImgRN {
		width: 66px;
		height: 66px;
	}
}


.cl2s1 {
	display: block;
	font-size: 24px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 36px;
	padding-top: 31px;
}

.cl2a1 {
	position: absolute;
	right: 0;
	top: 37px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 36px;
	cursor: pointer;
}

.cl2a1 b {
	color: #FF0072;
}

.cl2a1:hover {
	color: #FF0072;
}

.cl2s2 {
	display: block;
	width: 1170px;
	height: 1px;
	background: #FFFFFF;
	margin-top: 9px;
	transform: scaleY(0.6);
}

.cases-list-o-c-c {
	display: block;
	width: 1500px;
	position: relative;
	overflow: hidden;
	margin-top: 20px;
	transition: all 0.5s;
}

.cases-list-o-c-c-o {
	float: left;
	width: 270px;
	height: 430px;
	margin-right: 30px;
	position: relative;
	overflow: hidden;
}

/*  */
.cl2Img02 {
	display: block;
	width: 100%;
	height: 252px;
	object-fit: cover;
	transition: all 0.5s;

}

.cl2d3b {
	display: block;
	width: 100%;
	height: 252px;
	overflow: hidden;
}

.cl2Img03 {
	position: absolute;
	width: 16px;
	height: 16px;
	left: 0;
	top: 263px;
}

.cl2s3 {
	display: block;
	font-size: 14px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 24px;
	margin-top: 10px;
	position: relative;
	margin-left: 4px;
}

.cl2s4 {
	display: block;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	line-height: 16px;
	margin-left: 4px;
}

.cl2s5 {
	display: block;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 20px;
	margin-top: 40px;
	margin-left: 4px;
}

.cl2s5 b {
	font-size: 36px;
}

.cases-list-o-c-c-o:hover .cl2s5 b {
	color: #FF0072;
}

.cases-list-o-c-c-o:hover .cl2Img02 {
	transform: scale(1.1);
}

.cl2a2 {
	width: 86px;
	height: 33px;
	position: absolute;
	right: 0;
	bottom: 58px;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
}

.cl2a3 {
	text-decoration: none;
}

.cl2d3 {
	z-index: 1;
	position: relative;
	width: 83px;
	height: 30px;
	text-align: center;
}

.cl2s6 {
	display: block;
	position: relative;
	z-index: 1;
	font-size: 14px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 30px;
}

.cl2d2-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 83px;
	height: 30px;
	background: #eb4e93;
	border-radius: 10px;
	/* filter: blur(10px); */
}


.cl2d1-bg {
	width: 83px;
	height: 30px;
	background: #FF0072;
	border-radius: 10px;
	position: absolute;
	right: 0;
	bottom: 0;
	transition: all 0.1s;
}

.cl2a2:hover .cl2d1-bg {
	right: 3px;
	bottom: 3px;
}

.cl2a2:hover .cl2d2-bg {
	background: #FF0072;
}


/*  */

.cases-list-o2-c {
	display: block;
	width: 200px;
	height: 10px;
	position: relative;
	overflow: hidden;
	margin: 20px auto 90px;
}

.cases-list-o2-c-o {
	width: 60px;
	height: 10px;
	background: rgba(216, 216, 216, 0.48);
	float: left;
	margin: 0 20px;
	transition: all 0.5s;
}

.cases-list-o2-c-o-sel {
	background: #FF0072;
}

/*  */


.cases-list-o3-c {
	display: block;
	width: 1170px;
	margin: 60px auto 0;
	position: relative;
	overflow: hidden;
}

.cl2s7 {
	display: block;
	font-size: 24px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 36px;
}

.cl2s8 {
	display: block;
	width: 1170px;
	height: 1px;
	background: #FF0072;
	transform: scaleY(0.6);
	margin-top: 10px;
}

.cases-list-o3-c-h {
	display: block;
	overflow: hidden;
	position: relative;
	margin-top: 10px;
}

.cases-list-o3-c-h-o {
	width: 100%;
	display: block;
	overflow: hidden;
	position: relative;
	margin-top: 10px;
}

.cl2s9 {
	float: left;
	width: 62px;
	font-size: 16px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 36px;
}

.cases-list-o3-c-h-o-r {
	float: left;
	width: 1000px;
	overflow: hidden;
	position: relative;
}

.cl2s10 {
	float: left;
	font-size: 16px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 30px;
	padding: 0 15px;
	border-radius: 10px;
	margin-top: 3px;
}

.cl2s10-sel {
	background-color: #FF0072;
	color: #FFFFFF;
}


/*  */

.cases-list-o3-c-b {
	display: block;
	width: 1170px;
	overflow: hidden;
	margin: 30px auto 0px;
}

.cases-list-o3-c-b-o {
	width: 370px;
	height: 260px;
	float: left;
	overflow: hidden;
	margin-right: 30px;
	position: relative;
	margin-bottom: 30px;
}

.cases-list-o3-c-b-o:nth-child(3n) {
	margin-right: 0px;
}

.cl2Img5 {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

.cl2d5 {
	position: absolute;
	left: 1px;
	bottom: 0;
	display: block;
	width: 368px;
	height: 60px;
	text-align: center;
	transition: all 0.1s;
}


.cl2s15 {
	display: block;
	font-size: 16px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FF4E7C;
	line-height: 60px;
	letter-spacing: 1px;
	position: relative;
	z-index: 1;
}

.cl2d6 {
	width: 370px;
	height: 260px;
	left: 0;
	top: 260px;
	z-index: 1;
	position: absolute;
	transition: all 0.5s;
}

.cl2d5-bg {
	width: 368px;
	height: 660px;
	background: rgba(255, 255, 255, 0.8);
	position: absolute;
	left: 0;
	top: 0;
	box-shadow: 0px -2px 2px 0px #FFB8D8;
	border-radius: 10px 10px 0px 0px;
}

.cl2d6-bg {
	width: 370px;
	height: 260px;
	background: rgba(102, 102, 102, 0.6);
	box-shadow: 0px 2px 4px 0px rgba(255, 0, 114, 0.2);
	position: absolute;
	left: 0;
	top: 0;
}

.cl2s11-div{
	width: 370px;
	height: 60px;
	background: #FF0072;
	margin-top: 32px;
	display: block;
	overflow: hidden;
	box-shadow: 0px 2px 4px 0px rgba(255, 0, 114, 0.2);
	text-align: center;
	z-index: 1;
	position: relative;
}
.clImg1{
	width: 22px;
	height: 22px;
	position: absolute;
	right: 110px;
	top: 19px;
}
.cl2s11 {
	display: block;
	position: relative;
	font-size: 18px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 60px;
	letter-spacing: 1px;
	text-shadow: 0px 2px 4px rgba(255, 0, 114, 0.2);
	
}

.cl2s12 {
	display: block;
	width: 372px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 20px;
	text-shadow: 0px 2px 4px rgba(255, 0, 114, 0.2);
	text-align: center;
	position: relative;
	margin-top: 20px;
	z-index: 1;
}


.cl2s13 {
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 20px;
	text-shadow: 0px 2px 4px rgba(255, 0, 114, 0.2);
	display: block;
	position: relative;
	z-index: 1;
	margin: 9px 25px;
	text-align: center;
}

.cl2s14 {
	font-size: 16px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 30px;
	letter-spacing: 1px;
	text-shadow: 0px 2px 4px rgba(255, 0, 114, 0.2);
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 13px;
	z-index: 1;
}

.cases-list-o3-c-b-o:hover .cl2d5 {
	/* bottom: -70px; */
	opacity: 0;
}

.cases-list-o3-c-b-o:hover .cl2d6 {
	top: 0px;
}

.cases-list-o3-c-b-o:hover {
	top: 0px;
	box-shadow: 0px 2px 4px 0px rgba(255, 0, 114, 0.2);
}

.cl2d7 {
	display: block;
	width: 123px;
	height: 33px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

.cl2d7-c {
	position: absolute;
	width: 120px;
	height: 30px;
	left: 0;
	top: 0;
	text-align: center;
	z-index: 1;
}

.cl2d7-c-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #eb4e93;
	transition: all 0.3s;
	border-radius: 10px;
}

.cl2s17 {
	display: block;
	font-size: 14px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 30px;
	position: relative;
	z-index: 1;
}

.cl2d7-c-b-bg {
	position: absolute;
	width: 120px;
	height: 30px;
	right: 0;
	bottom: 0;
	background: #FF0072;
	border-radius: 10px;
	transition: all 0.3s;
}

.cl2d7:hover .cl2d7-c-bg {
	background: #FF0072;
}

.cl2d7:hover .cl2d7-c-b-bg {
	right: 2px;
	bottom: 2px;
}

/*  */

.cases-list-o4-c {
	display: block;
	width: 1170px;
	margin: 60px auto 0;
	position: relative;
	overflow: hidden;
}

.cases-list-o4-c-h {
	display: block;
	overflow: hidden;
	position: relative;
	margin-top: 25px;
	width: 2400px;
	transition: all 0.8s;
}

.cases-list-o4-c-h-o {
	float: left;
	width: 570px;
	height: 300px;
	background: #FFFFFF;
	overflow: hidden;
	margin-bottom: 30px;
	margin-right: 30px;
	position: relative;
}

.cl2Img6 {
	width: 280px;
	height: 300px;
	float: left;
	object-fit: cover;
}

.cases-list-o4-c-h-o-l {
	position: relative;
	width: 290px;
	height: 300px;
	float: left;
}


.cl2Img7 {
	position: absolute;
	left: 0;
	top: 0;
	width: 25px;
	height: 20px;
}

.cl2Img7r {
	position: absolute;
	right: 0;
	top: 0;
	width: 25px;
	height: 20px;
	transform: rotateY(180deg);
}

.cl2s18 {
	padding-top: 50px;
	display: block;
	margin-left: 38px;
	font-size: 24px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 40px;
	text-decoration: none;
}

.cl2s19 {
	display: block;
	width: 56px;
	height: 8px;
	background: rgba(255, 0, 114, 0.4);
	margin-left: 38px;
	margin-top: -14px;
}

.cl2s110 {
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	line-height: 20px;
	margin-left: 38px;
	margin-top: 10px;
	margin-right: 46px;
	display: block;
}

.cl2a4 {
	position: absolute;
	width: 120px;
	height: 28px;
	background: rgba(255, 0, 114, 0);
	border-radius: 10px;
	border: 1px solid #FF0072;
	left: 38px;
	bottom: 49px;
	text-align: center;
	font-size: 14px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FF0072;
	line-height: 28px;
	text-decoration: none;
	transition: all 0.3s;
}

.cl2a4:hover {
	color: #ffffff;
	background: #FF0072;
}

/*  */
.cases-list-o5 {
	display: block;
	width: 100%;
	height: 300px;
	overflow: hidden;
	position: relative;
	height: 300px;
}

.cases-list-o5-c {
	display: block;
	width: 1170px;
	height: 70px;
	margin: 19px auto 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.cl2Img8 {
	position: absolute;
	width: 100%;
	height: 300px;
	object-fit: cover;
	left: 0;
	top: 0;
}

.cl2s111 {
	position: relative;
	width: 100%;
	display: block;
	text-align: center;
	padding-top: 20px;
	font-size: 36px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 66px;
	z-index: 1;
}

.cases-list-o5-c-o {
	float: left;
	width: 269px;
	height: 70px;
	position: relative;
	margin-right: 30px;
}

.cases-list-o5-c-o:nth-child(4) {
	margin-right: 0px;
}

.cases-list-o5-c-o-i {
	display: block;
	overflow: hidden;
	width: 264px;
	height: 60px;
	border-radius: 10px;
}

.cl2s112 {
	float: left;
	font-size: 18px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 60px;
	position: relative;
	z-index: 1;
	margin-left: 30px;
}



.cl2i1 {
	float: left;
	height: 58px;
	z-index: 1;
	position: relative;
	border: none;
	background: none;
	outline: medium;
	font-size: 18px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FF0072;
	width: 120px;
}

.cases-list-o5-c-o-o-l {
	position: absolute;
	width: 262px;
	height: 58px;
	border-radius: 10px;
	border: 2px solid #FFFFFF;
	right: 0px;
	bottom: 0px;
}

.cases-list-o5-c-o-i-bg {
	position: absolute;
	left: 0;
	top: 0px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 10px;
	width: 264px;
	height: 60px;
}

.submit-f {
	display: block;
	width: 270px;
	height: 64px;
	margin: 42px auto 0px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	border: none;
	outline: medium;
	background: none;
	transition: all 0.3s;
}

.submit-f:hover .submit-f-bg {
	right: 6px;
	bottom: 4px;
}

.submit-f:hover .cl2s113 {
	background: #FF0072;
}

.cl2s113 {
	display: block;
	width: 260px;
	height: 56px;
	background: #eb4e93;
	position: relative;
	z-index: 1;
	text-align: center;
	font-size: 18px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 60px;
	border-radius: 10px;
	transition: all 0.3s;
}

.ahs-v6-c-o1:nth-child(4) {
	margin-right: 0px;
}

.submit-f-bg {
	position: absolute;
	right: 3px;
	bottom: 0;
	width: 260px;
	height: 56px;
	background: #FF0072;
	border-radius: 10px;
	transition: all 0.3s;
}


/*  */
.cases-list-o6 {
	width: 100%;
	height: 909px;
	background: #333333;
	display: block;
	overflow: hidden;
	position: relative;
}

.cases-list-o6-c {
	width: 1262px;
	height: 730px;
	background: #000000;
	display: block;
	overflow: hidden;
	margin: 90px auto;
	position: relative;
}

.cl2a6 {
	width: 1202px;
	height: 662px;
	display: block;
	margin: 34px 34px;
	text-align: center;
}

.cl2Img9 {
	width: 1202px;
	height: 662px;
	object-fit: cover;
	display: block;
}

.cases-list-o6-c-o {
	width: 1448px;
	height: 662px;
	position: absolute;
	top: 124px;
	left: 50%;
	margin-left: -724px;
}

.swiper-button-next,
.swiper-button-prev {
	opacity: 0;
	width: 100px !important;

}


.cl2Img11 {
	display: block;
	width: 66px;
	height: 66px;
	position: absolute;
	left: 37px;
	top: 50%;
	transform: translate(0, -50%) rotate(180deg);
	z-index: 9;
	opacity: 0;
	transition: all 0.3s;
}

.cl2Img12 {
	display: block;
	width: 66px;
	height: 66px;
	position: absolute;
	right: 37px;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 9;
	opacity: 0;
	transition: all 0.3s;
}
.cl2Img11-bg{
	position: absolute;
	width: 120px;
	height: 100%;
	background: #000000;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
}

.cl2Img12-bg{
	position: absolute;
	width: 120px;
	height: 100%;
	background: #000000;
	top: 0;
	right: 0;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
}

.cases-list-o6-c:hover .cl2Img11,.cases-list-o6-c:hover .cl2Img12 {
	opacity: 1;
}

.cases-list-o6-c:hover .cl2Img11-bg,.cases-list-o6-c:hover .cl2Img12-bg {
	opacity: 0.3;
}