.yn_caselist { width: 100%;}

.yn_caselist ul { list-style: none; margin: 0; padding: 0;}

.yn_wamp2 {
	position: absolute;
	left: 0;
	width:3.75rem;
	height:3.75rem;
	display: inline-block !important;
	top: 1.875rem;	
	background: rgba(255,231,0,0.8);
	color: #fff;
	text-align: center;
	opacity: 0;
	transition: all .3s;
}

h3.yn_tag { 
	position: absolute;
	left: 0;
	top: 0rem;
	background-color: #FFE700;
	padding: 0.2rem 0.4rem;
	line-height:1.2rem;
	font-size: 1.0rem; 
	color: #000; 
	font-weight: 200;	
	transition: all .3s;
}

.yn_c1:hover h3.yn_tag { 
	opacity: 0;	
	transform: translateX(-100%);
	color: transparent;
	transition: all .3s;
}

.yn_c1:hover .yn_wamp2 { 
	opacity: 1;
	top: 0;
	transform: scale(100,100);
	
	transition: all .3s;
}

.info_txt2 {
	position: absolute;
	top: 1.875rem;
	left: 0;
	right: 0;
	width: 0;
	height: 0;
	background-color: rgba(0,0,255,0.8);
	opacity: 0;
	
	transform: scale(1,1);
	
	transition: all .5s; 
}

.yn_case_box2 ul li:hover .info_txt2 {
	opacity: 1;
	width: 100%;
	height: 100%;
	transform: scale(50,50);
	
	transition: all .5s; 
}

.yn_case_box2 ul li:hover h3.yn_tag { 
	opacity: 0;	
	transform: translateX(-100%);
	color: transparent;
	transition: all .3s;
}

.box2 .yn_wamp2,
.box3 .yn_wamp2 { 
    position: absolute;
	left: 0;
	width:3.75rem;
	height:3.75rem;
	display: inline-block !important;
	top: 1.875rem;	
	
	background: rgba(0,0,255,0.8);
	color: #fff;
	text-align: center;
	opacity: 0;
	transition: all .3s;
}


.box2:hover h3.yn_tag,
.box3:hover h3.yn_tag { 
	opacity: 0;	
	transform: translateX(-100%);
	color: transparent;
	transition: all .3s;
}


.box2:hover .yn_wamp2,
.box3:hover .yn_wamp2 { 
   	opacity: 1;
	top: 0;
	transform: scale(100,100);
	transition: all .3s;
}

.yn_caselist2 .yn_case_tag a {
    display: inline-block;
    padding-right: 8px;
    border-right: 3px #fff solid;
    margin-right: 8px;
    font-weight: bold;
    float: left;
}

.yn_caselist2 .yn_case_tag a:last-child {
	border: none;
}


.yn_c1 {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.yn_c1_pic {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    object-fit: cover;
}

.yn_c1 .yn_c1_pic img{
  width:100%;
  display:block;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.yn_c1:hover img{
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.yn_c1_info {
    width: 100%;
    height: 100%;
    padding: 2rem 2.5rem;
    color: #000;
    z-index: 50;
    opacity: 0;
    animation-delay: .3s;
    animation: yn_case_tittleout .3s ease-out forwards;
    transition: all .3s;
}

.yn_case_tittle {
    font-size: 1.4rem;
    line-height: 1;
    font-weight: bold;
    text-align: left;
}

.yn_desc {
    position: absolute;
    bottom: 3rem;
    padding: 0rem 2.5rem;
    transform: translateY(3rem);
    opacity: 0;
    animation-delay: .3s;
    animation: yn_case_tittleout .3s ease-out forwards;
    transition: all .3s;
	color: #000000;
}

.yn_desc .i2 {
	display: block;
	width: 0;
	height: 5px;
	margin-bottom: 20px;
	background: #111;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	transition: all 300ms linear;
}

.yn_c1:hover .yn_desc .i2 {
	width: 2rem;
}

.yn_desc .p1 {
    font-size: 1rem;
    line-height: 1.3;
}

.yn_desc .p2 {font-size: 0.8rem;}

.yn_c1:hover .yn_wamp {	
	opacity: 1;	
	transition: all .3s;
	-webkit-transition: all .3s;
}

.yn_c1:hover h3.yn_tag { 
	opacity: 0;	
	transform: translateX(-100%);
	color: transparent;
	transition: all .3s;
}

.yn_c1:hover .yn_c1_info {
	animation: yn_case_tittle .3s ease-out forwards;	
	transition: all .3s;
	-webkit-transition: all .3s;
	animation-delay: .2s;
}

.yn_c1:hover .yn_desc {
	animation: yn_case_tittle .3s ease-out forwards;	
	transition: all .3s;
	-webkit-transition: all .3s;
	animation-delay: .2s;
}

@-webkit-keyframes yn_case_tittle {
	from {
		transform: translateY(3rem); opacity: 0;
	}
	to{
		transform: translateY(0rem); opacity: 1;
	}
}

@keyframes yn_case_tittle {
	from {
		transform: translateY(3rem); opacity: 0;
	}
	to{
		transform: translateY(0rem); opacity: 1;
	}
}

@-webkit-keyframes yn_case_tittleout {
	from {
		transform: translateY(0rem); opacity: 1;
	}
	to{
		transform: translateY(3rem); opacity:0;
	}
}

@keyframes yn_case_tittleout {
	from {
		transform: translateY(0rem); opacity: 1;
	}
	to{
		transform: translateY(3rem); opacity: 0;
	}
}

@media screen and (width: 1366px) {
	/*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-8),
	.yn_caselist2 li:nth-child(14n-7),
	.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; height: 25rem;}
	
	.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; height: 25rem;}
	
	
	.yn_caselist2 li:nth-child(14n-13),
	.yn_caselist2 li:nth-child(14n-2)  { max-height: 50rem; height: 50rem;}
	
	.yn_caselist2 li:nth-child(14n-2) {margin-top: -50rem !important; height: 50rem;}
	
	.yn_caselist2 li:nth-child(14n-11),
	.yn_caselist2 li:nth-child(14n-9) {margin-top: -25rem !important;height: 25rem; max-height: 25rem !important;  }	
	
	.yn_caselist2 li:nth-child(14n-1) {max-height: 25rem !important; height: 25rem; }
	.yn_caselist2 li:nth-child(14n) { margin-top: -25rem !important; max-height: 25rem !important;height: 25rem;}
}

@media screen and (max-width: 1280px) {
	.yn_case_tittle, .yn_case_tittle2 {
		font-size: 1.7rem;
	}
}

@media screen and (max-width: 375px) and (max-width: 750px) {
	/* .yn_caselist2 {
		height: auto !important;
	} */
	
	.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-5),
	.yn_caselist2 li:nth-child(7n-6){ 
		position: static !important; 
		max-width: 100% !important;
		width: 100% !important; 
		height: 26rem !important; 
		margin-top: 0 !important; 
		margin-right: 0 !important; 
		padding: 0;
	}
	
	.yn_caselist2 li:nth-child(7n-5) { max-width: 100% !important;}
	
	.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:auto !important;} */
	/* .yn_caselist {  margin-bottom: 3rem;} */ 
	.yn_caselist h3.yn_tag { display: block;}
}

@media screen and  (max-width: 575px)  {
	/*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: 100% !important;
		object-fit: cover;
	}
	
	.yn_caselist2 li:nth-child(7n-5) { max-width: 100% !important;}
	
	.design_by2 { margin-top: 0;}
	
	.yn_caselist h3.yn_tag { display: block;}
	
	.yn_caselist2 .yn_c1:hover .yn_desc {  display:block;}
	
	/*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;
		min-height: 26rem !important;
		margin-right: 0 !important;
		margin-top: 8px !important;
	}
}

@media screen and  (max-width: 365px)  {

}