.wrapper{overflow:hidden}.flex{display:flex;flex-wrap:wrap}.box{width:220px;padding:20px;margin:0 20px 20px 0;background:#666;color:#fff;box-sizing:border-box}.bgextend,.lineTrigger{width:220px;padding:20px;margin:0 20px 20px 0;box-sizing:border-box}.fadeIn{animation-name:fadeInAnime;animation-duration:5s;animation-fill-mode:forwards;opacity:0}@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}.top_fadeInTrigger{animation-duration:3s}.fadeUp{animation-name:fadeUpAnime;animation-fill-mode:forwards;opacity:0}@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}.fadeDown{animation-name:fadeDownAnime;animation-duration:.5s;animation-fill-mode:forwards;opacity:0}@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}.fadeLeft{animation-name:fadeLeftAnime;animation-duration:.5s;animation-fill-mode:forwards;opacity:0}@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}.fadeRight{animation-name:fadeRightAnime;animation-duration:.5s;animation-fill-mode:forwards;opacity:0}@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}.fadeInTrigger,.fadeUpTrigger,.fadeDownTrigger,.fadeLeftTrigger,.fadeRightTrigger{opacity:0}.flipDown{animation-name:flipDownAnime;animation-duration:1s;animation-fill-mode:forwards;opacity:0}@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}.flipLeft{animation-name:flipLeftAnime;animation-duration:1s;animation-fill-mode:forwards;perspective-origin:left center;opacity:0}@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}.flipLeftTop{animation-name:flipLeftTopAnime;animation-duration:1s;animation-fill-mode:forwards;opacity:0}@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}.flipRight{animation-name:flipRightAnime;animation-duration:1s;animation-fill-mode:forwards;perspective-origin:right center;opacity:0}@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}.flipRightTop{animation-name:flipRightTopAnime;animation-duration:1s;animation-fill-mode:forwards;opacity:0}@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}.flipDownTrigger,.flipLeftTrigger,.flipLeftTopTrigger,.flipRightTrigger,.flipRightTopTrigger{opacity:0}.rotateX{animation-name:rotateXAnime;animation-duration:1s;animation-fill-mode:forwards}@keyframes rotateXAnime{
	from{
		transform: rotateX(0);
		opacity: 0;
		}
	to{
		transform: rotateX(-360deg);
		opacity: 1;
		}
}.rotateY{animation-name:rotateYAnime;animation-duration:1s;animation-fill-mode:forwards}@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		opacity: 0;
		}
	to{
		transform: rotateY(-360deg);
		opacity: 1;
		}
}.rotateLeftZ{animation-name:rotateLeftZAnime;animation-duration:1s;animation-fill-mode:forwards}@keyframes rotateLeftZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(-360deg);
		opacity: 1;
		}
}.rotateRightZ{animation-name:rotateRightZAnime;animation-duration:1s;animation-fill-mode:forwards}@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(360deg);
		opacity: 1;
		}
}.rotateXTrigger,.rotateYTrigger,.rotateLeftZTrigger,.rotateRightZTrigger{opacity:0}.zoomIn{animation-name:zoomInAnime;animation-duration:.5s;animation-fill-mode:forwards}@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}.zoomOut{animation-name:zoomOutAnime;animation-duration:.5s;animation-fill-mode:forwards}@keyframes zoomOutAnime{
  from {
	transform: scale(1.2);
	opacity: 0;
  }

  to {
    transform:scale(1);
	opacity: 1;
  }
}.zoomInTrigger,.zoomOutTrigger{opacity:0}.blur{animation-name:blurAnime;animation-duration:1s;animation-fill-mode:forwards}@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}.blurTrigger{opacity:0}.smooth{animation-name:smoothAnime;animation-duration:1s;animation-fill-mode:forwards;　transform-origin:left;opacity:0}@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}.smoothTrigger{opacity:0}.bgextend{animation-name:bgextendAnimeBase;animation-duration:1s;animation-fill-mode:forwards;position:relative;overflow:hidden;opacity:0}@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}.bgappear{animation-name:bgextendAnimeSecond;animation-duration:1s;animation-delay:.6s;animation-fill-mode:forwards;opacity:0}@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}.bgLRextend::before{animation-name:bgLRextendAnime;animation-duration:1s;animation-fill-mode:forwards;content:"";position:absolute;width:100%;height:100%;background-color:#666}@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}.bgRLextend::before{animation-name:bgRLextendAnime;animation-duration:1s;animation-fill-mode:forwards;content:"";position:absolute;width:100%;height:100%;background-color:#666}@keyframes bgRLextendAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}.bgDUextend::before{animation-name:bgDUextendAnime;animation-duration:1s;animation-fill-mode:forwards;content:"";position:absolute;width:100%;height:100%;background-color:#666}@keyframes bgDUextendAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}.bgUDextend::before{animation-name:bgUDextendAnime;animation-duration:1s;animation-fill-mode:forwards;content:"";position:absolute;width:100%;height:100%;background-color:#666}@keyframes bgUDextendAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}.bgappearTrigger,.bgUDextendTrigger,.bgDUextendTrigger,.bgRLextendTrigger,.bgLRextendTrigger{opacity:0}.lineTrigger{position:relative;opacity:0}.lineTrigger.lineanime{animation-name:lineAnimeBase;animation-duration:1s;animation-fill-mode:forwards}@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}.lineTrigger::before,.lineTrigger::after{position:absolute;content:'';width:0;height:1px;background:#333}.line2::before,.line2::after{position:absolute;content:'';width:1px;height:0;background:#333}.lineTrigger::before{top:0;left:0}.lineTrigger.lineanime::before{animation:lineAnime .5s linear 0s forwards}.line2::before{top:0;right:0}.lineTrigger.lineanime .line2::before{animation:lineAnime2 .5s linear .5s forwards}.lineTrigger::after{bottom:0;right:0}.lineTrigger.lineanime::after{animation:lineAnime .5s linear 1s forwards}.line2::after{bottom:0;left:0}.lineTrigger.lineanime .line2::after{animation:lineAnime2 .5s linear 1.5s forwards}@keyframes lineAnime {
	0% {width:0%;}
    100%{width:100%;}
}@keyframes lineAnime2 {
	0% {height:0%;}
    100%{height:100%;}
}.lineTrigger.lineanime .lineinappear{animation:lineInnerAnime .5s linear 1.5s forwards;opacity:0}@keyframes lineInnerAnime{
	0% {opacity:0;}
    100% {opacity:1;}
}.count2{animation-iteration-count:2}.countinfinite{animation-iteration-count:infinite}.delay-time05{animation-delay:.5s}.delay-time1{animation-delay:1s}.delay-time15{animation-delay:1.5s}.delay-time2{animation-delay:2s}.delay-time25{animation-delay:2.5s}.change-time05{animation-duration:.5s}.change-time1{animation-duration:1s}.change-time15{animation-duration:1.5s}.change-time2{animation-duration:2s}.change-time25{animation-duration:2.5s}