.grid {max-width:100%;list-style:none;margin: 0; padding:0}

.grid li{display:block;float:left;padding:0;min-width:33%; margin-bottom:5rem;  opacity:0}

.grid li dl,.Lab_box2 li dl { width: 100% !important;}

.grid li dd { display: block; clear: both;}

.grid li dt img,.Lab_box2 li dt img { max-width: 100% !important;}

.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li{opacity:1 ;}

.yn_caselist2 { width: 100%; }

/*创意*/
.grid li:nth-child(4n-3) {
	width: 60%;
    float: left;
    margin-right: 10%;
    overflow: hidden;
    
	display: inline-block;
}

.grid li:nth-child(4n-2) {
	width: 30%;
	display: inline-block;
	/*margin-top: 7.3125rem;*/
	position: absolute !important;
	left: 70% !important;
	margin-top: -50.125rem !important;
}

.grid li:nth-child(4n-1) {
	width: 100%;
	clear: both;	
	display: inline-block;
}

.grid li:nth-child(4n) {
	width: 70%;
	clear: both;
    float: left;    
    overflow: hidden;   
	display: inline-block;
}

/*分享*/
.Lab_box2 li:nth-child(4n-3) {
	width: 59% !important;
    float: left;
    overflow: hidden;    
	display: inline-block;
	clear: both;
}

.Lab_box2 li:nth-child(4n-2) {
	width: 30% !important;
	 float: left;
	 margin-right: 20%;	 
	display: inline-block;
	/*margin-top: 6.25rem ;*/
	position: absolute !important;
	left: 0 !important;
	margin-top: 0 !important;
}

.Lab_box2 li:nth-child(4n-1) {
	width: 50% !important;
	float: left;
	text-align: right;
	display: inline-block;
	position: absolute !important;
	left: 50% !important;
	margin-top: -65.5rem !important;
}

.Lab_box2 li:nth-child(4n-1) img { float: right; margin-bottom: 1.8rem;}

.Lab_box2 li:nth-child(4n) {
	clear: both;
	width: 100% !important;   
    overflow: hidden;   
	display: inline-block;
}

/*caselist*/
.yn_caselist2 li {margin: 0; overflow: hidden; color: #fff; min-width: 10% !important;}

/*1*/
.yn_caselist2 li:nth-child(14n-13) {
	
	width: 50% !important; 
	height: 60rem !important;
	float: left;
	overflow: hidden;
	margin: 0 !important;
	padding: 0;
}
/*2*/
.yn_caselist2 li:nth-child(14n-12) {
	
	max-width: 25% !important;
	height: 30rem !important;
	float: left;
	overflow: hidden;
	position: absolute !important;
    left: 50% !important;   
    margin-top: 0 !important;
}

/*3*/
.yn_caselist2 li:nth-child(14n-11) {
	
	width: 25% !important;
	height: 30rem !important;
	float: left;
	overflow: hidden;
	left: 75% !important;
	margin-top: -30rem !important;
}

/*4*/
.yn_caselist2 li:nth-child(14n-10) {

	width: 25% !important;
	height: 30rem !important;
	float: left;
	overflow: hidden;
	position: absolute !important;
    left: 50% !important;   
    margin-top: 0 !important;
}
/*5*/
.yn_caselist2 li:nth-child(14n-9) {
	
	width: 25% !important;
	height: 30rem !important;
	float: left;
	overflow: hidden;
	left: 75% !important;
	margin-top: -30rem !important;
}

/*6*/
.yn_caselist2 li:nth-child(14n-8) {
	
	
	width: 50.01% !important;
	height: 60rem !important;
	float: left;
	overflow: hidden;
	position: absolute !important;
	left: 0 !important;
	margin-top: 0 !important;
}
/*7*/
.yn_caselist2 li:nth-child(14n-7) {
	
	width: 50% !important;
	height: 60rem !important;
	float: left;
	overflow: hidden;
	position: absolute;
	left: 50% !important;
	margin-top: -60rem !important;
}

/*8*/
.yn_caselist2 li:nth-child(14n-6) {
	
	max-width: 25% !important;
	height: 30rem !important;
	float: left;
	overflow: hidden;
	position: absolute !important;
    left: 0% !important;   
   /* margin-top: 0rem !important;*/
}

/*9*/
.yn_caselist2 li:nth-child(14n-5) {
	
	max-width: 25% !important;
	height: 30rem !important;
	float: left;
	overflow: hidden;
	position: absolute !important;
    left: 25% !important;   
    /*margin-top: 0rem !important;*/
}

/*10*/
.yn_caselist2 li:nth-child(14n-4) {
	
	max-width: 25% !important;
	height: 30rem !important;
	float: left;
	overflow: hidden;
	position: absolute !important;
    left: 0% !important;   
    margin-top: 0rem !important;
}

/*11*/
.yn_caselist2 li:nth-child(14n-3) {
	
	max-width: 25% !important;
	height: 30rem !important;
	float: left;
	overflow: hidden;
	position: absolute !important;
    left: 25% !important;   
    margin-top: 0 !important;
}

/*12*/
.yn_caselist2 li:nth-child(14n-2) {
	
	width: 50% !important;
	height: 60rem !important;
	float: left;
	overflow: hidden;
	position: absolute !important;
    left: 50% !important;   
    margin-top: -60rem  !important;
}

/*13*/
.yn_caselist2 li:nth-child(14n-1) {
	
	width: 75% !important;
	height: 30rem !important;
	float: left;
	overflow: hidden;
	position: absolute !important;
    left: 0 !important;   
    margin-top: 0rem !important;
}

/*14*/
.yn_caselist2 li:nth-child(14n) {
	
	width: 25% !important;
	height: 30rem !important;
	float: left;
	overflow: hidden;
	position: absolute !important;
    left: 75% !important;   
    margin-top: -30rem !important;
}





.yn_caselist2 li:hover a,.grid li:hover a { color: #fff;}

.grid li a,.grid li img{outline:0;border:0;height: 100%; display:block; object-fit: cover;}

.grid.effect-1 li.animate{-webkit-animation:fadeIn .65s ease forwards;animation:fadeIn .65s ease forwards}
@-webkit-keyframes fadeIn{0%{}100%{opacity:1}}
@keyframes fadeIn{0%{}100%{opacity:1}}

.grid.effect-2 li.animate{
	-webkit-transform:translateY(200px);
	transform:translateY(200px);
	-webkit-animation:moveUp .65s ease forwards;
	animation:moveUp .65s ease forwards;
}

@-webkit-keyframes moveUp{0%{}100%{-webkit-transform:translateY(0);opacity:1}}
@keyframes moveUp{0%{}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}

.grid.effect-3 li.animate{
	-webkit-transform:scale(.6);
	transform:scale(.6);
	-webkit-animation:scaleUp .65s ease-in-out forwards;
	animation:scaleUp .65s ease-in-out forwards;
}
	
@-webkit-keyframes scaleUp{0%{}100%{-webkit-transform:scale(1);opacity:1}}
@keyframes scaleUp{0%{}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}

.grid.effect-4{-webkit-perspective:1300px;perspective:1300px}.grid.effect-4 li.animate{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(400px) translateY(300px) rotateX(-90deg);transform:translateZ(400px) translateY(300px) rotateX(-90deg);-webkit-animation:fallPerspective .8s ease-in-out forwards;animation:fallPerspective .8s ease-in-out forwards}@-webkit-keyframes fallPerspective{0%{}100%{-webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg);opacity:1}}@keyframes fallPerspective{0%{}100%{-webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg);transform:translateZ(0px) translateY(0px) rotateX(0deg);opacity:1}}.grid.effect-5{-webkit-perspective:1300px;perspective:1300px}.grid.effect-5 li.animate{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:50% 50% -300px;transform-origin:50% 50% -300px;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-animation:fly .8s ease-in-out forwards;animation:fly .8s ease-in-out forwards}@-webkit-keyframes fly{0%{}100%{-webkit-transform:rotateX(0deg);opacity:1}}@keyframes fly{0%{}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);opacity:1}}.grid.effect-6{-webkit-perspective:1300px;perspective:1300px}.grid.effect-6 li.animate{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:0% 0%;transform-origin:0% 0%;-webkit-transform:rotateX(-80deg);transform:rotateX(-80deg);-webkit-animation:flip .8s ease-in-out forwards;animation:flip .8s ease-in-out forwards}@-webkit-keyframes flip{0%{}100%{-webkit-transform:rotateX(0deg);opacity:1}}@keyframes flip{0%{}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);opacity:1}}.grid.effect-7{-webkit-perspective:1300px;perspective:1300px}.grid.effect-7 li.animate{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-animation:helix .8s ease-in-out forwards;animation:helix .8s ease-in-out forwards}@-webkit-keyframes helix{0%{}100%{-webkit-transform:rotateY(0deg);opacity:1}}@keyframes helix{0%{}100%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);opacity:1}}.grid.effect-8{-webkit-perspective:1300px;perspective:1300px}.grid.effect-8 li.animate{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:scale(.4);transform:scale(.4);-webkit-animation:popUp .8s ease-in forwards;animation:popUp .8s ease-in forwards}@-webkit-keyframes popUp{0%{}70%{-webkit-transform:scale(1.1);opacity:.8;-webkit-animation-timing-function:ease-out}100%{-webkit-transform:scale(1);opacity:1}}@keyframes popUp{0%{}70%{-webkit-transform:scale(1.1);transform:scale(1.1);opacity:.8;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@media screen and (max-width:900px){.grid li{width:50%}}@media screen and (max-width:400px){.grid li{width:100%}}


@media screen and (width: 1440px) {
	/*body { zoom: 1;}*/
	/*案例页*/
	.yn_caselist2 li:nth-child(14n-12),
	.yn_caselist2 li:nth-child(14n-11),
	.yn_caselist2 li:nth-child(14n-10),
	.yn_caselist2 li:nth-child(14n-9),
	.yn_caselist2 li:nth-child(14n-6),
	.yn_caselist2 li:nth-child(14n-5),
	.yn_caselist2 li:nth-child(14n-4),
	.yn_caselist2 li:nth-child(14n-3).
	.yn_caselist2 li:nth-child(14n-1),
	.yn_caselist2 li:nth-child(14n)  { max-height: 24rem !important; height: 24rem !important;}
	
	.yn_caselist2 li:nth-child(14n-12),
	.yn_caselist2 li:nth-child(14n-10),
	.yn_caselist2 li:nth-child(14n-6),
	.yn_caselist2 li:nth-child(14n-5),
	.yn_caselist2 li:nth-child(14n-4),
	.yn_caselist2 li:nth-child(14n-3) { max-height: 24rem !important; height: 24rem !important; }
	
	.yn_caselist2 li:nth-child(14n-8) { margin-top: -0.0625rem !important;}
	
	
	.yn_caselist2 li:nth-child(14n-13),
	.yn_caselist2 li:nth-child(14n-8) { max-height: 48rem; height: 48rem !important; }
	
	.yn_caselist2 li:nth-child(14n-2),
	.yn_caselist2 li:nth-child(14n-7) { margin-top: -48.0625rem !important; -moz-transform: translateY(0.0625rem); height: 48rem !important;}
	
	.yn_caselist2 li:nth-child(14n-11),
	.yn_caselist2 li:nth-child(14n-9) {margin-top: -24rem !important; max-height: 24rem !important;height: 24rem !important; }
	
	.yn_caselist2 li:nth-child(14n) {max-height: 24rem !important;height: 24rem !important; margin-top: -24rem !important;}
	.yn_caselist2 li:nth-child(14n-1) {  max-height: 24rem !important;height: 24rem !important; margin-top: 0rem !important;}
	
	.yn_caselist2 li:nth-child(17n) { margin-top: -24.02rem !important;  height: 24.01rem !important;}
}



@media screen and (max-width: 1366px) {	
	/*lab*/
	.chuangzao .grid li:nth-child(4n-2) { margin-top: -40.125rem !important;}
	
	.share .Lab_box2 li:nth-child(4n-1) { margin-top: -62.5rem !important;}
	
	.Lab_box2 li:nth-child(4n-1) { margin-top: 0rem !important;}
	
	.Lab_title, .Lab_title a {  font-size: 2rem; }
	
	/*case_list*/
	.yn_caselist2 li:nth-child(14n-12),
	.yn_caselist2 li:nth-child(14n-11),
	.yn_caselist2 li:nth-child(14n-10),
	.yn_caselist2 li:nth-child(14n-9),
	.yn_caselist2 li:nth-child(14n-6),
	.yn_caselist2 li:nth-child(14n-5),
	.yn_caselist2 li:nth-child(14n-4),
	.yn_caselist2 li:nth-child(14n-3).
	.yn_caselist2 li:nth-child(14n-1),
	.yn_caselist2 li:nth-child(14n)  { max-height: 25rem !important; }
	
	.yn_caselist2 li:nth-child(14n-12),
	.yn_caselist2 li:nth-child(14n-10),
	.yn_caselist2 li:nth-child(14n-6),
	.yn_caselist2 li:nth-child(14n-5),
	.yn_caselist2 li:nth-child(14n-4),
	.yn_caselist2 li:nth-child(14n-3) { max-height: 25rem !important; }
	
	
	.yn_caselist2 li:nth-child(14n-13),
	.yn_caselist2 li:nth-child(14n-8),
	.yn_caselist2 li:nth-child(14n-7),
	.yn_caselist2 li:nth-child(14n-2)  { max-height: 50rem; }
	
	.yn_caselist2 li:nth-child(14n-7),
	.yn_caselist2 li:nth-child(14n-2) {margin-top: -50rem !important;}
	
	.yn_caselist2 li:nth-child(14n-11),
	.yn_caselist2 li:nth-child(14n-9) {margin-top: -25rem !important; max-height: 25rem !important;  }	
}


@media screen and (max-width: 1280px) {
	
	/*lab*/
	.chuangzao .grid li:nth-child(4n-2) { margin-top: -40.125rem !important;}
	
	.share .Lab_box2 li:nth-child(4n-1) { margin-top: -62.5rem !important;}
	
	.Lab_title, .Lab_title a { font-size: 1.5rem;}
		
	/*case_list*/
	.yn_caselist2 li:nth-child(14n-12),
	.yn_caselist2 li:nth-child(14n-11),
	.yn_caselist2 li:nth-child(14n-10),
	.yn_caselist2 li:nth-child(14n-9),
	.yn_caselist2 li:nth-child(14n-6),
	.yn_caselist2 li:nth-child(14n-5),
	.yn_caselist2 li:nth-child(14n-4),
	.yn_caselist2 li:nth-child(14n-3).
	.yn_caselist2 li:nth-child(14n-1),
	.yn_caselist2 li:nth-child(14n)  { max-height: 23rem !important; }
	
	.yn_caselist2 li:nth-child(14n-12),
	.yn_caselist2 li:nth-child(14n-10),
	.yn_caselist2 li:nth-child(14n-6),
	.yn_caselist2 li:nth-child(14n-5),
	.yn_caselist2 li:nth-child(14n-4),
	.yn_caselist2 li:nth-child(14n-3) { max-height: 23rem !important; }
	
	
	.yn_caselist2 li:nth-child(14n-13),
	.yn_caselist2 li:nth-child(14n-8),
	.yn_caselist2 li:nth-child(14n-7),
	.yn_caselist2 li:nth-child(14n-2)  { max-height: 46rem; }
	
	.yn_caselist2 li:nth-child(14n-7),
	.yn_caselist2 li:nth-child(14n-2) {margin-top: -46rem !important;}
	
	.yn_caselist2 li:nth-child(14n-11),
	.yn_caselist2 li:nth-child(14n-9) {margin-top: -23rem !important; max-height: 23rem !important;  }
}


@media screen and (max-width: 414px) {
	/*case_list*/
	.yn_caselist2 li,	
	.yn_caselist2 li:nth-child(7n),
	.yn_caselist2 li:nth-child(7n-1),
	.yn_caselist2 li:nth-child(7n-2),
	.yn_caselist2 li:nth-child(7n-3),
	.yn_caselist2 li:nth-child(7n-4),
	.yn_caselist2 li:nth-child(7n-6){ 
		position: static !important; 
		max-width: 100% !important;
		width: 100% !important; 
		height: 25rem !important; 
		margin-top: 0 !important; 
		margin-right: 0 !important; 
		padding: 0;
	}
	
	.yn_caselist2 li:nth-child(7n-5) .yn_c1 img { 
		position: static;
		max-width: auto !important; 
		height: 100% !important; 
		width: auto !important;
		object-fit: cover;
	}
	
	/*.yn_caselist2 { height: 2621.64px !important;}*/
	
	/* .yn_caselist {  margin-bottom: 3rem;} */
	
	.yn_caselist h3.yn_tag { display: block;}
	
	.grid li dt img, .Lab_box2 li dt img {  max-width: 100% !important; height: auto;}
	
	/*CreativeLab*/
	.grid li:nth-child(4n-3), 
	.grid li:nth-child(4n-2), 
	.grid li:nth-child(4n-1), 
	.grid li:nth-child(4n) {
		position: static !important;
		width: 100% !important;
		height: auto;
		margin-right: 0 !important;
		margin-top: 0 !important;
	}
	
}