.fadeIn{animation-duration:1s;animation-fill-mode:forwards;animation-name:fadeInAnime;opacity:0}@keyframes fadeInAnime{0%{opacity:0}to{opacity:1}}.fadeUp{animation-duration:.5s;animation-fill-mode:forwards;animation-name:fadeUpAnime;opacity:0}@keyframes fadeUpAnime{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}.fadeDown{animation-duration:.5s;animation-fill-mode:forwards;animation-name:fadeDownAnime;opacity:0}@keyframes fadeDownAnime{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}.fadeLeft{animation-duration:.5s;animation-fill-mode:forwards;animation-name:fadeLeftAnime;opacity:0}@keyframes fadeLeftAnime{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}.fadeRight{animation-duration:.5s;animation-fill-mode:forwards;animation-name:fadeRightAnime;opacity:0}@keyframes fadeRightAnime{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}.fadeDownTrigger,.fadeInTrigger,.fadeLeftTrigger,.fadeRightTrigger,.fadeUpTrigger{opacity:0}.flipDown{animation-duration:1s;animation-fill-mode:forwards;animation-name:flipDownAnime;opacity:0}@keyframes flipDownAnime{0%{opacity:0;transform:perspective(2500px) rotateX(100deg)}to{opacity:1;transform:perspective(2500px) rotateX(0)}}.flipLeft{animation-duration:1s;animation-fill-mode:forwards;animation-name:flipLeftAnime;opacity:0;perspective-origin:0}@keyframes flipLeftAnime{0%{opacity:0;transform:perspective(600px) translateZ(0) rotateY(30deg)}to{opacity:1;transform:perspective(600px) translateZ(0) rotateY(0deg)}}.flipLeftTop{animation-duration:1s;animation-fill-mode:forwards;animation-name:flipLeftTopAnime;opacity:0}@keyframes flipLeftTopAnime{0%{opacity:0;transform:translate(-20px,80px) rotate(-15deg)}to{opacity:1;transform:translate(0) rotate(0deg)}}.flipRight{animation-duration:1s;animation-fill-mode:forwards;animation-name:flipRightAnime;opacity:0;perspective-origin:100%}@keyframes flipRightAnime{0%{opacity:0;transform:perspective(600px) translateZ(0) rotateY(-30deg)}to{opacity:1;transform:perspective(600px) translateZ(0) rotateY(0deg)}}.flipRightTop{animation-duration:1s;animation-fill-mode:forwards;animation-name:flipRightTopAnime;opacity:0}@keyframes flipRightTopAnime{0%{opacity:0;transform:translate(-20px,80px) rotate(25deg)}to{opacity:1;transform:translateY(1) rotate(0deg)}}.flipDownTrigger,.flipLeftTopTrigger,.flipLeftTrigger,.flipRightTopTrigger,.flipRightTrigger{opacity:0}.rotateX{animation-duration:1s;animation-fill-mode:forwards;animation-name:rotateXAnime}@keyframes rotateXAnime{0%{opacity:0;transform:rotateX(0)}to{opacity:1;transform:rotateX(-1turn)}}.rotateY{animation-duration:1s;animation-fill-mode:forwards;animation-name:rotateYAnime}@keyframes rotateYAnime{0%{opacity:0;transform:rotateY(0)}to{opacity:1;transform:rotateY(-1turn)}}.rotateLeftZ{animation-duration:1s;animation-fill-mode:forwards;animation-name:rotateLeftZAnime}@keyframes rotateLeftZAnime{0%{opacity:0;transform:rotate(0)}to{opacity:1;transform:rotate(-1turn)}}.rotateRightZ{animation-duration:1s;animation-fill-mode:forwards;animation-name:rotateRightZAnime}@keyframes rotateRightZAnime{0%{opacity:0;transform:rotate(0)}to{opacity:1;transform:rotate(1turn)}}.rotateLeftZTrigger,.rotateRightZTrigger,.rotateXTrigger,.rotateYTrigger{opacity:0}.zoomIn{animation-duration:.5s;animation-fill-mode:forwards;animation-name:zoomInAnime}@keyframes zoomInAnime{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.zoomOut{animation-duration:.5s;animation-fill-mode:forwards;animation-name:zoomOutAnime}@keyframes zoomOutAnime{0%{opacity:0;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.zoomInTrigger,.zoomOutTrigger{opacity:0}.blur{animation-duration:1s;animation-fill-mode:forwards;animation-name:blurAnime}@keyframes blurAnime{0%{filter:blur(10px);opacity:0;transform:scale(1.02)}to{filter:blur(0);opacity:1;transform:scale(1)}}.blurTrigger,.smooth{opacity:0}.smooth{animation-duration:1s;animation-fill-mode:forwards;animation-name:smoothAnime;　transform-origin:left}@keyframes smoothAnime{0%{opacity:0;transform:translate3d(0,100%,0) skewY(12deg)}to{opacity:1;transform:translateZ(0) skewY(0)}}.smoothTrigger{opacity:0}.lineTrigger{opacity:0;position:relative}.lineTrigger.lineanime{animation-duration:1s;animation-fill-mode:forwards;animation-name:lineAnimeBase}@keyframes lineAnimeBase{0%{opacity:0}to{opacity:1}}.lineTrigger:after,.lineTrigger:before{background:#333;content:"";height:1px;position:absolute;width:0}.line2:after,.line2:before{background:#333;content:"";height:0;position:absolute;width:1px}.lineTrigger:before{left:0;top:0}.lineTrigger.lineanime:before{animation:lineAnime .5s linear 0s forwards}.line2:before{right:0;top: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}to{width:100%}}@keyframes lineAnime2{0%{height:0}to{height:100%}}.lineTrigger.lineanime .lineinappear{animation:lineInnerAnime .5s linear 1.5s forwards;opacity:0}@keyframes lineInnerAnime{0%{opacity:0}to{opacity:1}}.bgextend{animation-duration:1s;animation-fill-mode:forwards;animation-name:bgextendAnimeBase;opacity:0;overflow:hidden;position:relative}@keyframes bgextendAnimeBase{0%{opacity:0}to{opacity:1}}.bgappear{animation-delay:.6s;animation-duration:1s;animation-fill-mode:forwards;animation-name:bgextendAnimeSecond;opacity:0}@keyframes bgextendAnimeSecond{0%{opacity:0}to{opacity:1}}.bgLRextend:before{animation-duration:1s;animation-fill-mode:forwards;animation-name:bgLRextendAnime;background-color:#666;content:"";height:100%;position:absolute;width:100%}@keyframes bgLRextendAnime{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.001%{transform-origin:right}to{transform:scaleX(0);transform-origin:right}}.bgRLextend:before{animation-duration:1s;animation-fill-mode:forwards;animation-name:bgRLextendAnime;background-color:#666;content:"";height:100%;position:absolute;width:100%}@keyframes bgRLextendAnime{0%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(1);transform-origin:right}50.001%{transform-origin:left}to{transform:scaleX(0);transform-origin:left}}.bgDUextend:before{animation-duration:1s;animation-fill-mode:forwards;animation-name:bgDUextendAnime;background-color:#666;content:"";height:100%;position:absolute;width:100%}@keyframes bgDUextendAnime{0%{transform:scaleY(0);transform-origin:bottom}50%{transform:scaleY(1);transform-origin:bottom}50.001%{transform-origin:top}to{transform:scaleY(0);transform-origin:top}}.bgUDextend:before{animation-duration:1s;animation-fill-mode:forwards;animation-name:bgUDextendAnime;background-color:#666;content:"";height:100%;position:absolute;width:100%}@keyframes bgUDextendAnime{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.001%{transform-origin:bottom}to{transform:scaleY(0);transform-origin:bottom}}.bgDUextendTrigger,.bgLRextendTrigger,.bgRLextendTrigger,.bgUDextendTrigger,.bgappearTrigger{opacity:0}.wrapper{overflow:hidden}.flex{display:flex;flex-wrap:wrap}.box{background:#666;color:#221715}.bgextend,.box,.lineTrigger{box-sizing:border-box;margin:0 20px 20px;padding:20px;width:220px}.count2{animation-iteration-count:2}.countinfinite{animation-iteration-count:infinite}.fade1{animation-delay:.5s}.fade2{animation-delay:1s}.fade3{animation-delay:1.5s}.fade4{animation-delay:2s}.fade5{animation-delay:2.5s}.fade6{animation-delay:3s}.fade7{animation-delay:3.5s}.fade8{animation-delay:4s}.fade-s1{animation-delay:.3s}.fade-s2{animation-delay:.6s}.fade-s3{animation-delay:.9s}.fade-s4{animation-delay:1.2s}.fade-s5{animation-delay:1.5s}.fade-s6{animation-delay:1.8s}.fade-s7{animation-delay:2.1s}.fade-s8{animation-delay:2.4s}.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}