/* page motion */
.add-upscroll:not(.play-mo) {transform:translateY(70px) ;opacity:0;}
.play-mo.add-upscroll ,.play-mo .add-upscroll {animation: add-upscroll 0.7s 0s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay10 ,.play-mo .add-upscroll.delay10 {animation: add-upscroll 0.8s 0.1s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay20 ,.play-mo .add-upscroll.delay20 {animation: add-upscroll 0.8s 0.2s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay30 ,.play-mo .add-upscroll.delay30 {animation: add-upscroll 0.8s 0.3s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay40 ,.play-mo .add-upscroll.delay40 {animation: add-upscroll 0.8s 0.4s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay50 ,.play-mo .add-upscroll.delay50 {animation: add-upscroll 0.8s 0.5s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay60 ,.play-mo .add-upscroll.delay60 {animation: add-upscroll 0.8s 0.6s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay70 ,.play-mo .add-upscroll.delay70 {animation: add-upscroll 0.8s 0.7s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay80 ,.play-mo .add-upscroll.delay80 {animation: add-upscroll 0.8s 0.8s ease-in-out;animation-fill-mode: both;}
@keyframes add-upscroll {
	0%		{transform:translateY(70px);opacity:0;}
	100%	{transform: translateY(0px);opacity:1;}
}

.add-downscroll:not(.play-mo) {transform:translateY(-70px) ;opacity:0;}
.play-mo.add-downscroll ,.play-mo .add-downscroll {animation: add-downscroll 0.7s 0.0s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay10 ,.play-mo .add-downscroll.delay10 {animation: add-downscroll 0.7s 0.1s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay20 ,.play-mo .add-downscroll.delay20 {animation: add-downscroll 0.7s 0.2s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay30 ,.play-mo .add-downscroll.delay30 {animation: add-downscroll 0.7s 0.3s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay40 ,.play-mo .add-downscroll.delay40 {animation: add-downscroll 0.7s 0.4s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay50 ,.play-mo .add-downscroll.delay50 {animation: add-downscroll 0.7s 0.5s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay60 ,.play-mo .add-downscroll.delay60 {animation: add-downscroll 0.7s 0.6s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay70 ,.play-mo .add-downscroll.delay70 {animation: add-downscroll 0.7s 0.7s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay80 ,.play-mo .add-downscroll.delay80 {animation: add-downscroll 0.7s 0.8s ease-in-out;animation-fill-mode: both;}

@keyframes add-downscroll {
	0%		{transform: translateY(-70px) ;opacity:0;}
	100%	{transform: translateY(0px);opacity:1;}
}

header.show {animation: showMenu 0.3s ease-out;animation-fill-mode: both;}
@keyframes showMenu {

	100%{
		opacity:1;
		top:0px;
	}

}


.centerAni {
    transform-origin: center center;
	}
.rightorg {
    transform-origin: right center;
	}

.add-qzoom:not(.play-mo) {transform:scale(0) ;opacity:0;}
.play-mo.add-qzoom ,.play-mo .add-qzoom {animation: add-qzoom 0.7s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay10 ,.play-mo .add-qzoom.delay10 {animation: add-qzoom 0.7s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay20 ,.play-mo .add-qzoom.delay20 {animation: add-qzoom 0.7s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay30 ,.play-mo .add-qzoom.delay30 {animation: add-qzoom 0.7s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay40 ,.play-mo .add-qzoom.delay40 {animation: add-qzoom 0.7s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay50 ,.play-mo .add-qzoom.delay50 {animation: add-qzoom 0.7s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay60 ,.play-mo .add-qzoom.delay60 {animation: add-qzoom 0.7s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay70 ,.play-mo .add-qzoom.delay70 {animation: add-qzoom 0.7s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay80 ,.play-mo .add-qzoom.delay80 {animation: add-qzoom 0.7s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

@keyframes add-qzoom {
	0%		{transform: scale(0);opacity:0.5;}
	100%	{transform: scale(1);opacity:1;}
}

.view_filter_init {
opacity:0;
}
.view_filter {
	animation: add-view 0.3s  cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;
}
@keyframes add-view {
	0%		{transform: scale(0);opacity:0;}
	100%	{transform: scale(1);opacity:1;}
}

.add-qzoom:not(.play-mo) {transform:scale(0) ;opacity:0;}


.add-fadIn:not(.play-mo) {opacity:0}
.play-mo.add-fadIn ,.play-mo .add-fadIn{

animation: fadIn 0.5s 0.5s ease-in-out;animation-fill-mode: both;

}

@keyframes fadIn{
0%{opacity:0}
100%{opacity:1}
}

.add-zoomRotate:not(.play-mo) {opacity:0}
.play-mo.add-zoomRotate ,.play-mo .add-zoomRotate{

animation: zoomRotate 1.0s 1.0s cubic-bezier(0.33, 1, 0.68, 1);animation-fill-mode: both;

}

@keyframes zoomRotate{
0%{transform:scale(0);opacity:0}
100%{transform:scale(1) rotate(360deg);opacity:1}
}


.add-zoom:not(.play-mo) {opacity:0}
.play-mo.add-zoom ,.play-mo .add-zoom{animation: add-zoom 0.5s 1.2s cubic-bezier(0.33, 1, 0.68, 1);animation-fill-mode: both;}
.play-mo.add-zoom.delay10 ,.play-mo .add-zoom.delay10 {animation: add-zoom 0.4s 0.8s cubic-bezier(0.33, 1, 0.68, 1);animation-fill-mode: both;}
.play-mo.add-zoom.delay20 ,.play-mo .add-zoom.delay20 {animation: add-zoom 0.6s 0.6s cubic-bezier(0.33, 1, 0.68, 1);animation-fill-mode: both;}
.play-mo.add-zoom.delay30 ,.play-mo .add-zoom.delay30 {animation: add-zoom 0.8s 0.9s cubic-bezier(0.33, 1, 0.68, 1);animation-fill-mode: both;}

@keyframes add-zoom{
0%{transform:scale(0);opacity:0}
100%{transform:scale(1) ;opacity:1}
}

.play-mo.ballonShake ,.play-mo .ballonShake {animation: ballonShake 0.2s infinite both;}
@keyframes ballonShake {
	0% 		{transform: rotate(8deg);}
	50% 	{transform: rotate(0);}
	100% 	{transform: rotate(8deg);}
}


#wrap section.headingWrap.fix {position:fixed;bottom:0px;width: 100%;transition:0.3s;}
#wrap section.headingWrap.nofix {position:absolute;bottom:0px;width: 100%;transition:0.3s;}




@keyframes ani-zoom {
	100% 	{transform: scale(1);}
}

@keyframes ani-zoomBox {
	80% 	{transform: scale(1.2);}
	100% 	{transform: scale(1);}
}

@keyframes ani-fadeIn {
	100% 	{opacity:1;}
}
@keyframes ani-translateY {
	100% 	{transform: translateY(0); opacity:1;}
}
@keyframes ani-translateX {
	100% 	{transform: translateX(0); opacity:1;}
}

@keyframes ani-translateXS {
	100% 	{transform: translateX(0) skew(0deg, 0deg); opacity:1;}
}

@keyframes waveAni {
	0%   {transform: translateY(10px);}
	100% {transform: translateY(0px);}
}


@keyframes ani-hide {
	100% 	{transform: scale(0);opacity:0;}
}
@keyframes ani-show {
	0% 		{transform: scale(0);opacity:1;}
	100% 	{transform: scale(1);opacity:1;}
}


.add-rotate {animation: rotate-center 1.5s ease-in-out infinite both;}
@keyframes rotate-center {
	0% 		{transform: rotate(0);}
	50% 	{transform: rotate(360deg);}
	100% 	{transform: rotate(360deg);}
}

.add-shake {animation: shareAni 0.3s ease-in-out infinite both;transform-origin: left bottom;}
@keyframes shareAni {
	0% 		{transform: rotate(1.2deg);}
	50% 	{transform: rotate(0);}
	100% 	{transform: rotate(1deg);}
}

@keyframes scale-in-br {
    0% {
            transform: scale(0);
            transform-origin: 100% 100%;
            opacity: 1;
    }
    100% {
            transform: scale(1);
            transform-origin: 100% 100%;
            opacity: 1;
    }
}

.add-wheelRotate {animation: wheelRotateAni 3s cubic-bezier(0.33, 1, 0.68, 1) infinite both;}
@keyframes wheelRotateAni {
	0% 		{transform: rotate(0);}
	100% 	{transform: rotate(360deg);}
}

.add-zoomR {animation: zoomRAni 2.3s cubic-bezier(0.33, 1, 0.68, 1) infinite both;}
@keyframes zoomRAni {
	0%		{transform:scale(0.7);}
	50% 	{transform: scale(1);}
	100%	{transform:scale(0.7);}
}

.play-mo.add-slideLeft ,.play-mo .add-slideLeft {animation: slide-tl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes slide-tl {
	0% 		{transform: translateY(-100px) translateX(-100px);}
	100% 	{transform: translateY(0) translateX(0);}
  }

  .play-mo.add-slideRight ,.play-mo .add-slideRight {animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
  .play-mo.add-slideRight.delay10 ,.play-mo .add-slideRight.delay10 {animation: slide-in-right 0.5s 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}  
  @keyframes slide-in-right {
	0% {
	  		transform: translateX(1000px);
	  		opacity: 0;
	}
	100% {
	  		transform: translateX(0);
	  		opacity: 1;
	}
  }


  .add-downscroll:not(.play-mo) {transform:translateY(-70px) ;opacity:0;}
  .play-mo.add-downscroll ,.play-mo .add-downscroll {animation: add-downscroll 0.7s 0.0s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay1 ,.play-mo .add-downscroll.delay1 {animation: add-downscroll 0.7s 0.1s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay2 ,.play-mo .add-downscroll.delay2 {animation: add-downscroll 0.7s 0.2s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay3 ,.play-mo .add-downscroll.delay3 {animation: add-downscroll 0.7s 0.3s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay4 ,.play-mo .add-downscroll.delay4 {animation: add-downscroll 0.7s 0.4s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay5 ,.play-mo .add-downscroll.delay5 {animation: add-downscroll 0.7s 0.5s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay6 ,.play-mo .add-downscroll.delay6 {animation: add-downscroll 0.7s 0.6s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay7 ,.play-mo .add-downscroll.delay7 {animation: add-downscroll 0.7s 0.7s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay8 ,.play-mo .add-downscroll.delay8 {animation: add-downscroll 0.7s 0.8s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay9 ,.play-mo .add-downscroll.delay9 {animation: add-downscroll 0.7s 0.9s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay10 ,.play-mo .add-downscroll.delay10 {animation: add-downscroll 0.7s 1.0s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay11 ,.play-mo .add-downscroll.delay11 {animation: add-downscroll 0.7s 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay12 ,.play-mo .add-downscroll.delay12 {animation: add-downscroll 0.7s 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay13 ,.play-mo .add-downscroll.delay13 {animation: add-downscroll 0.7s 1.3s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay14 ,.play-mo .add-downscroll.delay14 {animation: add-downscroll 0.7s 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay15 ,.play-mo .add-downscroll.delay15 {animation: add-downscroll 0.7s 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay16 ,.play-mo .add-downscroll.delay16 {animation: add-downscroll 0.7s 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay17 ,.play-mo .add-downscroll.delay17 {animation: add-downscroll 0.7s 1.7s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

  .slide-in-tl {
	animation: slide-in-tl 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-tl {
	0% {
	  transform: translateY(-300px) translateX(-2500px);
	  opacity: 0;
	}
	100% {
	  transform: translateY(0) translateX(0);
	  opacity: 1;
	}
  }
  
 .logo {transform: translateY(-200px);opacity: 0;}
 .logo {animation: ani-logo 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

@keyframes ani-logo {
	100% 	{transform: translateY(0px);opacity: 1;}
}

  .motion-first div {opacity:0;transition:0.3s;}
  .motion-second div {opacity:0;transition:0.3s;}
  .motion-third div {opacity:0;transition:0.3s;}
  .motion-forth div {opacity:0;transition:0.3s;}
  .motion-fifth div {opacity:0;transition:0.3s;}
  .motionGroup .text {opacity:0;transform: scale(2);transition:0.3s;}
  #mainhead .motion-first .carMotion,#mainhead .motion-first .car {
	  transform: translateY(-100px) translateX(-500px);
	  opacity: 0;
  }
  #mainhead .motion-second .robot {
	  transform: scale(0.5);
	  opacity: 0;
  }
  #mainhead .motion-third .mobility {
	  transform: translateY(150px) translateX(300px);
	  opacity: 0;
  }
  #mainhead .motion-forth .drone {
	  transform: translateY(150px) translateX(300px);
	  opacity: 0;
  }
  #mainhead .motion-forth .tv {
	  transform: translateY(-150px) translateX(0);
	  opacity: 0;
  }
  #mainhead .motion-forth .people {
	  transform: translateY(150px) translateX(0);
	  opacity: 0;
  }
  #mainhead .motion-fifth .carMotion
  {
	  transform: scale(0.5);
	  opacity: 0;
  }
  #mainhead .motion-fifth .plane01
  {
	  transform: translateY(300px) translateX(-300px);
	  opacity: 0;
  }
  #mainhead .motion-fifth .plane
  {
	  transform: translateY(-300px) translateX(300px);
	  opacity: 0;
  }


@keyframes ani-star {
	0% 	{opacity:1;}
	100% 	{ opacity: 0.7;}
}
@keyframes ani-zoom {
	100% 	{transform: translate(0,0) scale(1);opacity: 1;}
}
@keyframes ani-zoom-out {
	0% 	{}
	100% 	{transform: translate(0,0) scale(0);opacity: 0;}
}
@keyframes ani-fadeout {
	0% 	{ opacity: 1;}
	100% 	{ opacity: 0;}
}

@keyframes ani-right {
	100% 	{transform: translate(0,0) scale(1);opacity: 1;}
}

@keyframes ani-right-out {
	0% 	{opacity: 1;}
	100% 	{transform: translate(1000px,200px);opacity: 0;}
}

.graph-motion .barGroup .ani {transform:translateY(550px) ;}
.graph-motion .barGroup .ani span{transform:scale(0) ;opacity: 0;}
.graph-motion .barGroup .ani .light {transform:scale(0) ;opacity: 0;}
.graph-motion .linearLine {transform:scaleY(0) ;opacity: 0;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(1) {animation: add-bar 0.7s 0.0s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(2) {animation: add-bar 0.7s 0.1s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(3) {animation: add-bar 0.7s 0.2s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(4) {animation: add-bar 0.7s 0.3s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(5) {animation: add-bar 0.7s 0.4s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(6) {animation: add-bar 0.7s 0.5s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(7) {animation: add-bar 0.7s 0.6s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(8) {animation: add-bar 0.7s 0.7s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(9) {animation: add-bar 0.7s 0.8s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(10) {animation: add-bar 0.7s 0.9s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(11) {animation: add-bar 0.7s 1.0s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(12) {animation: add-bar 0.7s 1.1s ease-in-out;animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(13) {animation: add-bar 0.7s 1.2s ease-in-out;animation-fill-mode: both;}
@keyframes add-bar {
	100% 	{transform:translateY(0px);}
}

.play-mo .graph-motion .barGroup .ani:nth-of-type(1) span {animation: add-barNum 0.3s 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(2) span {animation: add-barNum 0.3s 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(3) span {animation: add-barNum 0.3s 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(4) span {animation: add-barNum 0.3s 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(5) span {animation: add-barNum 0.3s 1.1s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(6) span {animation: add-barNum 0.3s 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(7) span {animation: add-barNum 0.3s 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(8) span {animation: add-barNum 0.3s 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(9) span {animation: add-barNum 0.3s 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(10) span {animation: add-barNum 0.3s 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(11) span {animation: add-barNum 0.3s 1.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(12) span {animation: add-barNum 0.3s 1.8s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}
.play-mo .graph-motion .barGroup .ani:nth-of-type(13) span {animation: add-barNum 0.3s 1.9s cubic-bezier(0.250, 0.460, 0.450, 0.940);animation-fill-mode: both;}

.play-mo .graph-motion .barGroup .ani .light {animation: add-light 0.5s 1.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) alternate infinite;}
.play-mo .graph-motion .linearLine {animation: add-line 0.7s 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
@keyframes add-barNum {
	100% 	{transform:scale(1) ;opacity: 1;}
}
@keyframes add-line {
	100% 	{transform:scaleY(1) ;opacity: 1;}
}
@keyframes add-light {
	0% 	{transform:scale(0.7) ;opacity: 0;}
	100% 	{transform:scale(1) ;opacity: 1;}
}