/* ============================================================
PC
==============================================================*/

@media (min-width: 762px) {

	
	/* =========================================================================
 	inview anime
	===========================================================================*/
	.lazy_fadein{
		opacity:0;
	}
	.lazy_fadein_act{
		opacity:1;
		transition: all 0.5s cubic-bezier(0, 0, 0, 0);
	}
	
	.lazy_fadeinLeft{
		opacity:0;
		transform: translate(-50px,0); 
	}
	.lazy_fadeinRight{
		opacity:0;
		transform: translate(50px,0); 
	}
	
	.lazy_fadeinLeft_active,.lazy_fadeinRight_active{
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate(0,0); 
		opacity:1;
	}

	
	.lazy_fadeinUp,.lazy_fadeinUpA,.lazy_fadeinUpB,.lazy_fadeinUpC,.lazy_fadeinUpD{
		opacity:0;
		transform: translate(0,10px); 
	}
	
	
	.lazy_fadeinUp_active{
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate(0,0); 
		opacity:1;
	}
	
	.lazy_fadeinDownA,.lazy_fadeinDownB,.lazy_fadeinDownC,.lazy_fadeinDownD{
		opacity:0;
		transform: translate(0,-10px); 
	}
	
	.lazy_fadeinDown_active{
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate(0,0); 
		opacity:1;
	}
	
	.lazy_fadeinUpCenter{
		opacity:0;
		transform:translate(-50%, 10%);
	}
	
	.lazy_fadeinUpCenter_active{
		transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform:translate(-50%, 0);
		opacity:1;
	}
	
	.lazy_fadeinScaleA,.lazy_fadeinScaleB,.lazy_fadeinScaleC,.lazy_fadeinScaleD{
		opacity:0;
		transform: scale(1.2);
	}
	.lazy_fadeinScale_active{
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: scale(1);
		opacity:1;
	}
	
	
	
}


/* ============================================================
keyframe UP_txt
==============================================================*/
/*.sUP1{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;}
.sUP2{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 18ms;}
.sUP3{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 36ms;}
.sUP4{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 54ms;}
.sUP5{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 72ms;}
.sUP6{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 90ms;}
.sUP7{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 108ms;}
.sUP8{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 126ms;}
.sUP9{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 144ms;}
.sUP10{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 162ms;}
.sUP11{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 180ms;}
.sUP12{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 196ms;}
.sUP13{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 216ms;}
.sUP14{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 234ms;}
.sUP15{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 256ms;}
.sUP16{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 270ms;}
.sUP17{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 288ms;}
.sUP18{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 306ms;}
.sUP19{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 324ms;}
.sUP20{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 342ms;}*/

.sUP1{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;}
.sUP2{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 30ms;}
.sUP3{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 60ms;}
.sUP4{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 90ms;}
.sUP5{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 120ms;}
.sUP6{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 150ms;}
.sUP7{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 180ms;}
.sUP8{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 210ms;}
.sUP9{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 240ms;}
.sUP10{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 270ms;}
.sUP11{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 300ms;}
.sUP12{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 330ms;}
.sUP13{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 360ms;}
.sUP14{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 390ms;}
.sUP15{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 420ms;}
.sUP16{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 450ms;}
.sUP17{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 480ms;}
.sUP18{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 510ms;}
.sUP19{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 540ms;}
.sUP20{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 570ms;}

.ssUP1{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;}
.ssUP2{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 50ms;}
.ssUP3{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 100ms;}
.ssUP4{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 150ms;}
.ssUP5{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 200ms;}
.ssUP6{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 250ms;}
.ssUP7{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 300ms;}
.ssUP8{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 350ms;}
.ssUP9{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 400ms;}
.ssUP10{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 450ms;}
.ssUP11{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 500ms;}
.ssUP12{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 550ms;}
.ssUP13{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 600ms;}
.ssUP14{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 650ms;}
.ssUP15{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 700ms;}
.ssUP16{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 750ms;}
.ssUP17{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 800ms;}
.ssUP18{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 850ms;}
.ssUP19{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 900ms;}
.ssUP20{transition:transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 950ms;}


/* ============================================================
loading
==============================================================*/
@media (min-width: 762px) {
	#loading{
		width:100vw;
		height:100vh;
		position:relative;
		background: #fff;
		z-index: 10000;
	}

	.loadci{
		display:block;
		position: absolute;
		top: calc(47%);
		left: 50%;
		transform:translate(-50%, -50%);
		width: 320px;
	}

	.loadci img{
		animation: loadcia 2.0s cubic-bezier(0, 0, 0.15, 1);
	}
	
	.loader,
	.loader:before,
	.loader:after {
	  border-radius: 50%;
	  width: 1.0em;
	  height: 1.0em;
	  position: absolute;
	  top: calc(50% + 25px);
	  left:0;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  -webkit-animation: load7 1.8s infinite ease-in-out;
	  animation: load7 1.8s infinite ease-in-out;
	}
	.loader {
	  color: #b4b4b4;
	  font-size: 9px;
	  margin: 0 auto;
	  position: relative;
	  text-indent: -9999em;
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-animation-delay: -0.16s;
	  animation-delay: -0.16s;
	}
	.loader:before,
	.loader:after {
	  content: '';
	  position: absolute;
	  top: 0;
	}
	.loader:before {
	  left: -2.5em;
	  -webkit-animation-delay: -0.32s;
	  animation-delay: -0.32s;
	}
	.loader:after {
	  left: 2.5em;
	}

	.load_txt {
		display:block;
		font-size: 1.2rem;
		color: #acacac;
		position: absolute;
		top: calc(50% + 82px);
		left: 50%;
		transform:translate(-50%, -50%);
		animation: loadtxt 1.5s infinite ease-in-out;
	}
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes loadcia {
	0% {
		transform: translate(0, 30px);
		opacity: 0;
	}
	30% {
		transform: translate(0, 30px);
		opacity: 0;
	}
	100% {
		transform: translate(0,0);
		opacity: 1;
	}
}
@keyframes loadtxt {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
/* ============================================================
keyframe
==============================================================*/

	
@keyframes sdb {
  			0% {
    			transform: translate(0, -10px);
    			opacity: 0;
    			height:10px;
  			}
  			30% {
    			opacity: 1;
  			}
  			80% {
    			transform: translate(0, 100px);
    			opacity: 0;
    			height:60px;
  			}
  			100% {
    			opacity: 0;
  			}
		}