html,body {height:100%;width:100%;position:relative;}

/* mobile */
@media only screen and (max-width: 640px) {
	body,html,.main {min-width:375px;width:375px;max-width:375px;overflow-x:hidden}	
	.desktop {display:none !important;}
	html {font-size:10px !;}

	

}



.global-section-set {width:100%;height:100%;position:relative;}
.global-section,.swiper-slide-global {width:100%;position:relative;display:flex;align-items:center;}
.global-section.footer {align-items:center;}



.global-section.section-1 {overflow:hidden;}

.scroll-content {height:100%;  }
.main-scene {position:absolute;left:0%;top:0%;width:100%;height:100%;opacity:1;}
.swiper-container-global {width:100%;height:100%;}


@media only screen and (max-width: 640px) {
	.global-section-set {width:375px;height:100%;position:relative;}
	.global-section,.swiper-slide-global {width:375px;position:relative;display:block;}

	.global-section {display:none;}
	.global-section.ready {display:block;}

	.scroll-content {height:100%;  }
	.main-scene {position:absolute;left:0%;top:0%;width:375px;height:100%;opacity:1;}
	.swiper-container-global {width:375px;height:100%;}
	.global-section.footer {align-items:center;min-height:auto;padding:0 0 30px 0}

}


.anim {transition: 1s cubic-bezier(.55,0,.1,1);}
.main-scene {position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;z-index:10;overflow:hidden;transition:z-index 0.1s  linear .1s}

.main-scene.off {z-index:-1;transition:z-index 0.1s  linear .5s}


.main-scene .overlay {animation:main-scene-overlay 1s linear 3s 1 normal;animation-fill-mode:both;position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;transform:translateX(0%)}

.inner-page .main-scene .overlay {display:none;}
.inner-page .case-overlay {}

.key-section {
  animation:key-section 1s cubic-bezier(.55,0,.1,1) 3.1s 1 normal;
  animation-fill-mode:both;  
  width:116rem;
  max-width: 134rem;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
}



.key-image {position:relative;height:39rem;}
.key-image li {height:13rem;position:relative;overflow:hidden;}

.layer-image {position:absolute;left:0;top:0;height:39rem;}
.layer-2-image {z-index:2;}
.layer-1-image {z-index:0;}

@media only screen and (max-width: 640px) {
	.main-scene {width:375px;overflow:hidden;display:block;padding-top:100px;position:relative;left:auto;top:auto;height:660px;}
	.main-scene .overlay {width:375px;animation:main-scene-overlay 0.6s linear 3s 1 normal;animation-fill-mode:both;  }

	.key-image {position:relative;height:18.6rem;width:315px;}
	.key-image li {height:6.2rem;}

	.key-section {width:335px;max-width:335px;margin:0 0 0 20px;display:block;justify-content:center;flex-direction:column;align-items:flex-start;overflow:visible;}
	
	.key-text {margin:3rem 0 0 0;width:100%;}
}



	.main-scene.off .layer-1-image {opacity:0;} 


.layer-1-image span {display:block;width:100%;height:100%;position:absolute;right:0;top:0;font-weight:700;text-indent:-9999px;overflow:hidden;}
.layer-2-image span {display:block;width:100%;height:100%;position:absolute;left:0;top:0;font-weight:700;text-indent:-9999px;overflow:hidden;}

.layer-1-image li {color:#fff;background:#0c0c0c;}
.layer-1-image div {background:#0c0c0c;z-index:2;animation:layer-1-image-div .3s linear 3.3s 1 normal;animation-fill-mode:both;width:0;height:100%;position:relative;overflow:hidden;position:absolute;left:0;top:0;}
.layer-1-image li.w-1 {animation:layer-1-image-w1 1s cubic-bezier(.55,0,.1,1) 0s 1 normal;animation-fill-mode:both; width:45.5rem;}
.layer-1-image li.w-2 {animation:layer-1-image-w2 1s cubic-bezier(.55,0,.1,1) 0.05s 1 normal;animation-fill-mode:both;width:70.8rem;}
.layer-1-image li.w-3 {animation:layer-1-image-w3 1s cubic-bezier(.55,0,.1,1) 0.15s 1 normal;animation-fill-mode:both;width:52.5rem;height:14.6rem;margin-top:-1.6rem;}


.layer-2-image {transition:transform .7s ease-in 0s,opacity 0.5s ease-in 0.1s}
.layer-2-image li.w-1 {animation:layer-2-image-w1 .5s linear 3.2s 1 normal;animation-fill-mode:both;width:37.5rem;}
.layer-2-image li.w-2 {animation:layer-2-image-w2 .5s linear 3.2s 1 normal;animation-fill-mode:both;width:55rem;}
.layer-2-image li.w-3 {animation:layer-2-image-w3 .5s linear 3.2s 1 normal;animation-fill-mode:both;width:30.6rem;height:14.6rem;margin-top:-1.6rem;;}


.layer-1-image span {}
.layer-1-image li.w-1 span {background:url(../i/t1.png) no-repeat;background-size:auto 100%;}
.layer-1-image li.w-2 span {background:url(../i/t2.png) no-repeat;background-size:auto 100%;}
.layer-1-image li.w-3 span {background:url(../i/t3.png) no-repeat;background-size:auto 100%;}


.layer-2-image .overlay-2 {position:absolute;left:0;top:0;height:100%;width:0;z-index:7;background:#0c0c0c;}
.layer-2-image .w-1 .overlay-2 {transition:width 0.4s linear .0s;}
.layer-2-image .w-2 .overlay-2 {transition:width 0.8s linear .0s;}
.layer-2-image .w-3 .overlay-2 {transition:width 0.5s linear .0s;}


.main-scene.off .layer-2-image .overlay-2 {width:100%;}


.layer-2-image li.w-1 span {background:#fff url(../i/t4.png) no-repeat;background-size:auto 100%;width:37.5rem;}
.layer-2-image li.w-2 span.s1 {background:#fff url(../i/t5_1.png) no-repeat;background-size:auto 100%;}
.layer-2-image li.w-2 span.s2 {background:#fff url(../i/t5_2.png) no-repeat;background-size:auto 100%;}
.layer-2-image li.w-2 span.s3 {background:#fff url(../i/t5_3.png) no-repeat;background-size:auto 100%;}
.layer-2-image li.w-3 span {background:url(../i/t6.png) no-repeat;background-size:contain;width:30.6rem;}
.layer-2-image div.slider {width:14.6rem;background:#fff;}

.layer-2-image li.w-2 span {width:0px;transition:width 0.5s cubic-bezier(.55,0,.1,1) 2s;}
.layer-2-image li.w-2 span.s1.active {width:14.6rem;}
.layer-2-image li.w-2 span.s2.active {width:55rem}
.layer-2-image li.w-2 span.s3.active {width:55rem}

@media only screen and (max-width: 640px) {
	.layer-image {position:absolute;left:0;top:0;width:315px;height:18.6rem;}

	.layer-1-image li.w-1 {width:22.3rem;height:6.2rem;}
	.layer-1-image li.w-2 {width:21.7rem;height:5.9rem;}
	.layer-1-image li.w-3 {width:37.6rem;height:6.9rem;margin-top:-0.7rem;}

	.layer-2-image li.w-1 {width:17.8rem;height:6.2rem;}
	.layer-2-image li.w-2 {width:26.2rem;height:6.2rem;}
	.layer-2-image li.w-3 {width:14.5rem;height:6.9rem;margin-top:-0.7rem;;}

	.layer-2-image li.w-2 span.s1.active {width:7rem;}
	.layer-2-image li.w-2 span.s2.active {width:26rem}
	.layer-2-image li.w-2 span.s3.active {width:26rem}

}


@keyframes layer-1-image-w1 { from {width:0;} to {width:455px;} }
@keyframes layer-1-image-w2 { from {width:0;} to {width:708px;} }
@keyframes layer-1-image-w3 { from {width:0;} to {width:525px;} }

@keyframes layer-1-image-div { from {width:0%;} to {width:100%;} }


@keyframes layer-2-image-w1 { from {width:0;} to {width:375px;} }
@keyframes layer-2-image-w2 { from {width:0;} to {width:550px;} }
@keyframes layer-2-image-w3 { from {width:0;} to {width:306px;} }




@keyframes main-scene-overlay { from {transform:translateX(0%)} to {transform:translateX(100%)}  }
@keyframes key-section { from {width:708px} to {width:1160px} }

@keyframes key-text {from {z-index:-1} to {z-index:1} }
@keyframes key-text-shade {from {transform:translateX(0%);} to {transform:translateX(100%);}}




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

	@keyframes layer-1-image-w1 { from {width:0;} to {width:217px;} }
	@keyframes layer-1-image-w2 { from {width:0;} to {width:338px;} }
	@keyframes layer-1-image-w3 { from {width:0;} to {width:248px;} }

	@keyframes layer-1-image-div { from {width:0%;} to {width:100%;} }


	@keyframes layer-2-image-w1 { from {width:0;} to {width:178px;} }
	@keyframes layer-2-image-w2 { from {width:0;} to {width:262px;} }
	@keyframes layer-2-image-w3 { from {width:0;} to {width:146px;} }
	



	@keyframes main-scene-overlay { from {transform:translateX(0%)} to {transform:translateX(100%)}  }
	@keyframes key-section { from {width:315px;} to {width:315px; } }
	
	@keyframes key-text {from {z-index:-1} to {z-index:1}}
	@keyframes key-text-shade {from {transform:translateX(0%);} to {transform:translateX(100%);}}

}

.key-text-shade {background:#0c0c0c;position:absolute;left:0;top:0;width:100%;bottom:0;transform:translateX(-50%) scaleX(0);animation:key-text-shade .5s cubic-bezier(.58,.07,.98,.77) 3s 1 normal;animation-fill-mode:both;transform-origin:right center;}


.key-text {white-space:nowrap;font-size:1.9rem;width:46rem;margin:0 0 0 10rem;position:relative;z-index:10;animation:key-text .5s linear 4s 1 normal;animation-fill-mode:both;}
.key-text p {margin:3.6rem 0 3.6rem 0;line-height:2.7rem;}

.key-text p {opacity:0;transform:translateY(100%);transition:transform 0.5s ease 0s,opacity 0.5s ease 0s}
.key-text .sr-button {opacity:0;transform:translateY(100%);transition:transform 0.5s ease 0.2s,opacity 0.5s ease 0.2s}
.key-text.active  p {opacity:1;transform:translateY(0%);}
.key-text.active .sr-button {opacity:1;transform:translateY(0%);}



.main-scene.off .key-text {opacity:0;transition:opacity 0.3s linear 0s}
.main-scene.off .layer-2-image {transform:translateX(300%);opacity:0;}


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

}



.case-overlay {position:absolute;right:0;width:100%;height:33.433%;z-index:200;background:#0c0c0c;}
.case-overlay-1 {top:0;transition:transform .7s ease .2s;}
.case-overlay-2 {top:33.3333%;transition:transform .6s ease 0.3s;}
.case-overlay-3 {top:66.6666%;transition:transform .7s ease 0.2s;}

#section-1.on .case-overlay {transform:translateX(100%)} 

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

	.key-text {margin:0 0 0 0;padding:45px 0 0 0;width:335px;}
	.key-text p {font-size:14px;line-height:21px;margin:0;color:#E7E7E7;}
}