
.case-slider {width:100%;margin:auto;padding-top:15vh}
.case-slide {display:flex;align-items:center;justify-content:space-between;width:116rem;margin:auto;max-width:134rem;height:70vh;max-height:800px;overflow:hidden;}
/*.case-slide-1 {max-height:100vh;height:100vh;}*/
.case-descra {width:50%;padding:5rem 0rem 5rem 0;position:relative;z-index:15;}
.case-descra .caption {margin:0 0 0 0px;font-size:9.2rem;line-height:10.5rem;font-weight:700;opacity:0;min-width:45rem;transform:translateY(15rem);transition:transform .4s ease-out, opacity 0.4s ease-out;} 
.case-descra .caption a:hover {color:#fff;opacity:1;}
.case-descra .descra {font-size:1.9rem;line-height:2.7rem;color:#fff;opacity:0;padding:1rem 0rem 0 7px;width:35.5rem;transform:translateY(15rem);transition:transform 0.5s ease-out, opacity 0.5s  ease-out;}

.case-slide-active .case-descra .caption {opacity:1;transform:translateY(0%);}
.case-slide-active .case-descra .descra {opacity:1;transform:translateY(0%)}


.case-visual {width:50%;position:relative;z-index:10;/*align-self:flex-start;*/}

/*.case-visual img {max-width:70.8rem;max-height:47rem;width:100%;object-fit:cover}*/
/*.case-visual img {width:100%;height:100%;width:100%;object-fit:cover}*/



.cases-inner-list .case-visual {align-self:center;width:auto;display:block;}

.case-visual {position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.54,.05,1,.63), opacity 0.2s;}
/*.case-visual img {transition:transform 10s linear;}*/
.case-visual .shade   {position:absolute;transition:transform 1s ease;background:#0c0c0c;width:100%}

.main-scene-section .case-visual {opacity:0;}

@media only screen and (max-width: 640px) {
	.case-slider {padding:0 0 0 0;}
	.case-slide {flex-direction:column-reverse;width:100%;padding:0 0 0 0;}

	.case-visual {width:315px;height:170px;margin:0;position:relative;z-index:10;}
	/*.case-visual img {max-width:60rem;height:170px;width:315px;max-height:40rem;object-fit:cover}*/

	.case-descra {width:90%;margin:40px auto auto auto;padding:0 0rem 0 0;transform:translateX(-155%);transition:transform .3s cubic-bezier(.54,.05,1,.63)}
	.case-descra .caption {font-size:32px;line-height:43px;font-weight:700;} 
	.case-descra .descra {font-size:16px;;line-height:24px;padding:5px 30px 0 0;width:auto;color:#e7e7e7;}
}

.clipped-wrapper {max-width:70.8rem;height:39rem;width:100%;position:relative;transform:scale(1.1,1.1);transform-origin:center bottom}
.clipped-wrapper span {display:block;position:absolute;left:0;top:0;width:100%;height:100%;}
.clipped-wrapper img {transition:transform: 3s cubic-bezier(.12,.56,.53,1.01);object-fit:cover;}
 
.clipped-wrapper span.p1 {transform:translateX(1%);    -webkit-clip-path:polygon(0% 0, 100% 0, 100% 34%, 0% 34%);clip-path: polygon(0% 0, 100% 0, 100% 34%, 0% 34%);}
.clipped-wrapper span.p2 {transform:translateX(-1%);   -webkit-clip-path:polygon(0% 33%, 100% 33%, 100% 67%, 0% 67%);clip-path: polygon(0% 33%, 100% 33%, 100% 67%, 0% 67%);}
.clipped-wrapper span.p3 {transform:translateX(0.6%);  -webkit-clip-path:polygon(0% 66%, 100% 66%, 100% 100%, 0% 100%);clip-path: polygon(0% 66%, 100% 66%, 100% 100%, 0% 100%);}


.case-slide-active  .clipped-wrapper span.p1 img {transform:translateY(8%); }
.case-slide-active  .clipped-wrapper span.p2 img {transform:translateY(8%); }
.case-slide-active  .clipped-wrapper span.p3 img {transform:translateY(8%); }
.case-slide-active  .clipped-wrapper span.p4 img {transform:translateY(8%); }
.case-slide-active  .clipped-wrapper span.p5 img {transform:translateY(8%); }


.case-visual .shade1  {transform:scaleX(0.3);left:-1rem;top:-1rem;height:14.5rem;transform-origin:left center;transition:transform 1s ease}
.case-visual .shade2  {transform:scaleX(0.3);left:-1rem;top:12.9rem;height:13rem;transform-origin:left center;transition:transform .8s ease}
.case-visual .shade3  {transform:scaleX(0.3);left:-1rem;top:25.5rem;height:14rem;transform-origin:left center;transition:transform .3s ease}


.case-visual .shade4  {transform:scaleX(0.7);right:-1rem; top:-1rem;  height:14.5rem;transform-origin:right center;transition:transform .5s ease}
.case-visual .shade5  {transform:scaleX(0.7);right:-1rem; top:13rem; height:13rem;transform-origin:right center;transition:transform .8s ease}
.case-visual .shade6  {transform:scaleX(0.7);right:-1rem; top:25.5rem;height:14rem;transform-origin:right center;transition:transform 1.1s ease}


.case-visual .shadex-1 {transform:scaleX(0.4);transition:transform .9s ease}
.case-visual .shadex-2 {transform:scaleX(0.5);transition:transform .7s ease}
.case-visual .shadex-3 {transform:scaleX(0.6);transition:transform .6s ease}
.case-visual .shadex-4 {transform:scaleX(0.7);transition:transform .5s ease}
.case-visual .shadex-5 {transform:scaleX(0.8);transition:transform .4s ease}
.case-visual .shadex-6 {transform:scaleX(0.9);transition:transform .3s ease}



.case-slide-active .case-visual .shadex-1 ,.case-visual-acitve .shadex-1 {transform:scaleX(0.0)}
.case-slide-active .case-visual .shadex-2 ,.case-visual-acitve .shadex-2 {transform:scaleX(0.03)}
.case-slide-active .case-visual .shadex-3 ,.case-visual-acitve .shadex-3 {transform:scaleX(0.06)}
.case-slide-active .case-visual .shadex-4 ,.case-visual-acitve .shadex-4 {transform:scaleX(0.09)}
.case-slide-active .case-visual .shadex-5 ,.case-visual-acitve .shadex-5 {transform:scaleX(0.12)}
.case-slide-active .case-visual .shadex-6 ,.case-visual-acitve .shadex-6 {transform:scaleX(0.15)}
                                                                                               


.case-slide-active .case-visual .shade1.shadex-1,
.case-slide-active .case-visual .shade1.shadex-2,
.case-slide-active .case-visual .shade1.shadex-3,
.case-slide-active .case-visual .shade1.shadex-4,
.case-slide-active .case-visual .shade1.shadex-5,
.case-slide-active .case-visual .shade1.shadex-6 {transform:scaleX(0) !important;transition:transform .9s ease}

