@charset 'utf-8';

@keyframes spin {
	0% {
		transform:rotateY(0deg);
	}
	100% {
		transform:rotateY(360deg);
	}
}

@keyframes imgDown {
  0% {
    transform:translate3d(0, -30%, 0);
    opacity:0;
  }
  100% {
    transform:rotateY(0) translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes bgs1{
	0%{transform:scale(1.25);}
	100%{transform:scale(1.00);}
}
@keyframes bgs2{
	0%{transform:scale(1.00); }
	100%{transform:scale(1.15); }
}
@keyframes bgs3{
	0%{transform:scale(0.9); opacity:0;}
	100%{transform:scale(1.00); opacity:1;}
}
@keyframes bgs4{
	0%{transform:scale(0); opacity:0;}
	100%{transform:scale(1.00); opacity:1;}
}
@keyframes bgs4_1{
	0%{transform:translateX(-50%) scale(0); opacity:0;}
	100%{transform:translateX(-50%) scale(1.00); opacity:1;}
}
@keyframes bgs4_b {
	0%{transform:scale(1.00); opacity:1;}
	100%{transform:scale(1.5); opacity:0;}
}
@keyframes bgs5{
	0%{transform:scale(1.15);}
	100%{transform:scale(1.00);}
}
@keyframes bgs6{
	0%{transform:scale(1.15); opacity:0;}
	100%{transform:scale(1.00); opacity:1;}
}


@-webkit-keyframes txtRight {
  from {
    -webkit-transform:translate3d(100%, 0, 0);
    transform:translate3d(100%, 0, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes txtRight {
  from {
    -webkit-transform:translate3d(100%, 0, 0);
    transform:translate3d(100%, 0, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}


@-webkit-keyframes txtLeft {
  from {
    -webkit-transform:translate3d(-100%, 0, 0);
    transform:translate3d(-100%, 0, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes txtLeft {
  from {
    -webkit-transform:translate3d(-100%, 0, 0);
    transform:translate3d(-100%, 0, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}


@-webkit-keyframes vmLeft {
  from {
    -webkit-transform:translate3d(-30%, 0, 0);
    transform:translate3d(-30%, 0, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes vmLeft {
  from {
    -webkit-transform:translate3d(-30%, 0, 0);
    transform:translate3d(-30%, 0, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}
@-webkit-keyframes txtUp {
  from {
    -webkit-transform:translate3d(0, 250%, 0);
    transform:translate3d(0, 250%, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes txtUp {
  from {
    -webkit-transform:translate3d(0, 250%, 0);
    transform:translate3d(0, 250%, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}
@-webkit-keyframes vm_txtUp {
  from {
    -webkit-transform:translate3d(0, 100%, 0);
    transform:translate3d(0, 100%, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes vm_txtUp {
  from {
    -webkit-transform:translate3d(0, 100%, 0);
    transform:translate3d(0, 100%, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}
@-webkit-keyframes vm_txtDown {
  from {
    -webkit-transform:translate3d(0, -100%, 0);
    transform:translate3d(0, -100%, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes vm_txtDown {
  from {
    -webkit-transform:translate3d(0, -100%, 0);
    transform:translate3d(0, -100%, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}


/* keyframes animation */
@keyframes scroll {
	0% { transform:translateX(3px);}
	50% { transform:translateX(-3px);}
	100% { transform:translateX(3px);}
}


@keyframes vsImg {
	0% { -webkit-transform:scale(1.15); -ms-transform:scale(1.15); transform:scale(1.15); }
	100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
}
@keyframes scaleY_bar {
	0% { -webkit-transform:scaleY(0); -ms-transform:scaleY(0); transform:scaleY(0); opacity:0; }
	100% { -webkit-transform:scaleY(1); -ms-transform:scaleY(1); transform:scaleY(1); opacity:1; }
}

@keyframes ani_1 {
	0% { -webkit-transform:translateX(-100px); -ms-transform:translateX(-100px); transform:translateX(-100px); opacity:0;}
	100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity:1;}
}
@keyframes ani_1s {
	0% { -webkit-transform:translateX(-100px); -ms-transform:translateX(-100px); transform:translateX(-100px); opacity:0;}
	60% { opacity:1;}
	100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity:1;}
}

@keyframes ani_2 {
	0% { -webkit-transform:translateX(100px); -ms-transform:translateX(100px); transform:translateX(100px); opacity:0;}
	100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity:1;}
}

@keyframes ani_2s {
	0% { -webkit-transform:translateX(100px); -ms-transform:translateX(100px); transform:translateX(100px); opacity:0;}
	60% { opacity:1;}
	100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity:1;}
}

@keyframes ani_3 {
	0% { -webkit-transform:translateY(100px); -ms-transform:translateY(100px); transform:translateY(100px); opacity:0;}
	100% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity:1;}
}

@keyframes ani_3_1 {
	0% { -webkit-transform:translate(-50%, 50px); -ms-transform:translate(-50%, 50px); transform:translate(-50%, 50px); opacity:0;}
	100% { -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); transform:translate(-50%, 0); opacity:1;}
}

@keyframes ani_4 {
	0% { -webkit-transform:translateY(-50px); -ms-transform:translateY(-50px); transform:translateY(-50px); opacity:0;}
	100% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity:1;}
}
@keyframes ani_5 {
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes ani_h0 {
	0% {height:0;}
	100% {height:0;}
}
@keyframes ani_h {
	0% {height:0;}
	100% {height:100%;}
}
@keyframes ani_w {
	0% {width:0; opacity:0; }
	100% {width:100%; opacity:1; }
}

@keyframes ani_off_1 {
	0% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity:1;}
	100% { -webkit-transform:translateX(100px); -ms-transform:translateX(100px); transform:translateX(100px); opacity:0;}
}

@keyframes ani_off_2 {
	0% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity:1;}
	100% { -webkit-transform:translateX(-100px); -ms-transform:translateX(-100px); transform:translateX(-100px); opacity:0;}
}



@-webkit-keyframes scrollDown {
  0% {
    top:0;
  }
  50% {
    top:calc(100% - 50px);
  }
  100% {
    top:0;
  }
}

@keyframes scrollDown {
  0% {
    top:0;
  }
  50% {
    top:calc(100% - 50px);
  }
  100% {
    top:0;
  }
}

@keyframes mv_scale{
	0%{transform:scale(0.85); opacity:0;}
	100%{transform:scale(1); opacity:1;}
}
@keyframes scale{
	0%{transform:scale(0.6); opacity:0;}
	100%{transform:scale(1); opacity:1;}
}

@keyframes ani_icon5 {
	0%{ border-radius:50%; transform:rotateZ(0); }
	50%{ border-radius:0; transform:rotateZ(180deg); }
	100%{ border-radius:50%; transform:rotateZ(360deg); }
}
@-webkit-keyframes ani_icon5 {
	0%{ border-radius:50%; transform:rotateZ(0); }
	50%{ border-radius:0; transform:rotateZ(180deg); }
	100%{ border-radius:50%; transform:rotateZ(360deg); }
}



/* business motion */
.bList .slider_box .slick-active #motion1_1 {
  animation: motion1_1 2000ms linear 1 normal forwards
}

@keyframes motion1_1 {
  0% {
    opacity: 1
  }

  10% {
    opacity: 1
  }

  15% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

.bList .slider_box .slick-active #motion1_2 {
  animation: motion1_2 2000ms linear 1 normal forwards
}

@keyframes motion1_2 {
  0% {
    opacity: 0
  }

  10% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  25% {
    opacity: 1
  }

  30% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

.bList .slider_box .slick-active #motion1_3 {
  animation: motion1_3 2000ms linear 1 normal forwards
}

@keyframes motion1_3 {
  0% {
    opacity: 0
  }

  25% {
    opacity: 0
  }

  30% {
    opacity: 1
  }

  40% {
    opacity: 1
  }

  45% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

.bList .slider_box .slick-active #motion1_4 {
  animation: motion1_4 2000ms linear 1 normal forwards
}

@keyframes motion1_4 {
  0% {
    opacity: 0
  }

  40% {
    opacity: 0
  }

  45% {
    opacity: 1
  }

  55% {
    opacity: 1
  }

  60% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

.bList .slider_box .slick-active #motion1_5 {
  animation: motion1_5 2000ms linear 1 normal forwards
}

@keyframes motion1_5 {
  0% {
    opacity: 0
  }

  55% {
    opacity: 0
  }

  60% {
    opacity: 1
  }

  70% {
    opacity: 1
  }

  75% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

.bList .slider_box .slick-active #motion1_6 {
  animation: motion1_6 2000ms linear 1 normal forwards
}

@keyframes motion1_6 {
  0% {
    opacity: 0
  }

  70% {
    opacity: 0
  }

  75% {
    opacity: 1
  }

  85% {
    opacity: 1
  }

  90% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

.bList .slider_box .slick-active #motion1_7 {
  animation: motion1_7 2000ms linear 1 normal forwards
}

@keyframes motion1_7 {
  0% {
    opacity: 0
  }

  85% {
    opacity: 0
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 1
  }
}

.bList .slider_box .slick-active #motion1_8 {
  animation: motion1_8 1000ms linear infinite normal forwards
}
@keyframes motion1_8 {
  0% {
    transform: translate(0,0) rotate(0deg)
  }
  25% {
    transform: translate(0,0) rotate(-45deg)
  }
  50% {
    transform: translate(0,0) rotate(-90deg)
  }

  75% {
    transform: translate(0,0) rotate(-135deg)
  }

  100% {
    transform: translate(0,0) rotate(-180deg)
  }
}


.bList .slider_box .slick-active #motion2_1 {
  animation: motion2_1 1000ms linear 99999 normal forwards
}

@keyframes motion2_1 {
  0% {
    transform: translate(-492.47px, -75.4px)
  }

  50% {
    transform: translate(-492.47px, -63.4px)
  }

  100% {
    transform: translate(-492.47px, -75.4px)
  }
}

.bList .slider_box .slick-active #motion2_2 {
  animation: motion2_2 1000ms linear 99999 normal forwards
}

@keyframes motion2_2 {
  0% {
    transform: translate(398.68px, 81.425px) rotate(0deg)
  }

  25% {
    transform: translate(398.68px, 81.425px) rotate(-45deg)
  }

  50% {
    transform: translate(398.68px, 81.425px) rotate(-90deg)
  }

  75% {
    transform: translate(398.68px, 81.425px) rotate(-135deg)
  }

  100% {
    transform: translate(398.68px, 81.425px) rotate(-180deg)
  }
}

.bList .slider_box .slick-active #motion2_3 {
  animation: motion2_3 1000ms linear 99999 normal forwards
}

@keyframes motion2_3 {
  0% {
    transform: translate(181.680019px, 64.65px)
  }

  50% {
    transform: translate(191.67998px, 64.65px)
  }

  100% {
    transform: translate(181.67998px, 64.65px)
  }
}


.bList .slider_box .slick-active #motion3_1 {
  animation: motion3_1 1500ms linear infinite normal forwards
}

@keyframes motion3_1 {
  0% {
    transform: translate(358.87px, 92.48px) rotate(0deg)
  }

  50% {
    transform: translate(358.87px, 92.48px) rotate(45deg)
  }

  100% {
    transform: translate(358.87px, 92.48px) rotate(90deg)
  }
}

.bList .slider_box .slick-active #motion3_2 {
  animation: motion3_2 2000ms linear infinite normal forwards
}

@keyframes motion3_2 {
  0% {
    transform: translate(457.565px, 157.92px) rotate(0deg)
  }

  50% {
    transform: translate(457.565px, 157.92px) rotate(45deg)
  }

  100% {
    transform: translate(457.565px, 157.92px) rotate(90deg)
  }
}

.bList .slider_box .slick-active #motion3_3 {
  animation: motion3_3 1000ms linear infinite normal forwards
}

@keyframes motion3_3 {
  0% {
    transform: translate(93px, 201.96px)
  }

  50% {
    transform: translate(110px, 201.96px)
  }

  100% {
    transform: translate(93px, 201.96px)
  }
}

.bList .slider_box .slick-active #motion3_4 {
  animation: motion3_4 1000ms linear infinite normal forwards
}
@keyframes motion3_4 {
  0% {
    transform: translate(0,0) rotate(0deg)
  }
  25% {
    transform: translate(0,0) rotate(-45deg)
  }
  50% {
    transform: translate(0,0) rotate(-90deg)
  }

  75% {
    transform: translate(0,0) rotate(-135deg)
  }

  100% {
    transform: translate(0,0) rotate(-180deg)
  }
}


@keyframes marquee {
  0% { 
		transform: translate3d(0, 0, 0)
	}
  100% { 
		transform: translate3d(-100%, 0, 0)
	}			
}


@keyframes marqueeRev {
	0% {
		transform: translate3d(-100%, 0, 0)
	}
	
	100% {
		transform: translate3d(0, 0, 0)
	}
}


@keyframes allBox {
	/*
	0%{ opacity:0; left:5%; top:10%; width:calc(100vw - 10%); height:calc(100vh - 20%); }
	50%{ opacity:1; }
	100%{ opacity:1; left:0; top:0; width:100vw; height:100vh; }
	*/
	to { height:100%; }	
	from { height:0; }
}
@keyframes allBox_s {
	/*
	0%{ left:0; top:0; width:100%; height:100%; opacity:1; visibility:visible; z-index:10000; }
	100%{ left:5%; top:10%; width:calc(100% - 10%); height:calc(100% - 20%); opacity:0; visibility:hidden; z-index:-111; }
	*/
	0%{ opacity:1; visibility:visible; z-index:10000; }
	100%{ opacity:1; visibility:hidden; z-index:-111; }
}
@keyframes allBox_off {
	to { height:0; }
	from { height:100%; }
}