@charset "UTF-8";

/* animate CSS */
/* Fade */  
.fadeIn {animation-name: fadeInAnime; animation-duration: 2s; animation-fill-mode: forwards; opacity: 0;}
@keyframes fadeInAnime {from {opacity: 0;}	to {opacity: 1;}}
.fadeUp {animation-name: fadeUpAnime; animation-duration: 1.5s; 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: 0.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: 0.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: 0.5s; animation-fill-mode: forwards; opacity: 0;}
@keyframes fadeRightAnime {from {opacity: 0; transform: translateX(100px);}	to {opacity: 1; transform: translateX(0);}}
/* fade default settings　*/
.fadeInTrigger,.fadeUpTrigger,.fadeDownTrigger,.fadeLeftTrigger,.fadeRightTrigger {opacity: 0;}

/* Flip */
.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;}}
/* flip default settings　*/
.flipDownTrigger,.flipLeftTrigger,.flipLeftTopTrigger,.flipRightTrigger,.flipRightTopTrigger {opacity: 0;}

  /* Rotate */
.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;}}
/* rotate default settings　*/
.rotateXTrigger,.rotateYTrigger,.rotateLeftZTrigger,.rotateRightZTrigger {opacity: 0;}

/* Zoom */
.zoomIn {animation-name: zoomInAnime; animation-duration: 0.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: 0.5s; animation-fill-mode: forwards;}
@keyframes zoomOutAnime {from {transform: scale(1.2); opacity: 0;} to {transform: scale(1); opacity: 1;}}
/* zoom default settings　*/
.zoomInTrigger,.zoomOutTrigger {opacity: 0;}

/* Blur */
.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;}}
/* blur default settings　*/
.blurTrigger {opacity: 0;}

/* Smooth */
.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;}}
/* smooth default settings　*/
.smoothTrigger {opacity: 0;}

/*Line animated*/
.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;}}

/*top/bottom line*/
.lineTrigger::before,.lineTrigger::after {position: absolute; content: ""; width: 0; height: 1px; background: #333;}

/*left/right line*/
.line2::before,.line2::after {position: absolute; content: ""; width: 1px; height: 0; background: #333;}

/*top*/
.lineTrigger::before {top: 0; left: 0;}
.lineTrigger.lineanime::before {animation: lineAnime .5s linear 0s forwards;}

/*right*/
.line2::before {top: 0; right: 0;}
.lineTrigger.lineanime .line2::before {animation: lineAnime2 .5s linear .5s forwards;}

/*bottom*/
.lineTrigger::after {bottom: 0;	right: 0;}
.lineTrigger.lineanime::after {animation: lineAnime .5s linear 1s forwards;}

/*left*/
.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%;}}

/*inner*/
.lineTrigger.lineanime .lineinappear {animation: lineInnerAnime .5s linear 1.5s forwards; opacity: 0;}
@keyframes lineInnerAnime {0% {opacity: 0;}	100% {opacity: 1;}}

/* background animated*/
.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;}}

/*inner*/
.bgappear {animation-name: bgextendAnimeSecond;	animation-duration: 1s;	animation-delay: 0.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: #fd827c;}
@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: #fd827c;}
@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: #fd827c;}
@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: #fd827c;}
@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);}}

/* background anmated default settings　*/
.bgappearTrigger,.bgUDextendTrigger,.bgDUextendTrigger,.bgRLextendTrigger,.bgLRextendTrigger {opacity: 0;}
.bgextend,.lineTrigger {width: 220px; box-sizing: border-box;} 	/* padding: 20px; margin: 0 20px 20px 20px; */

/* animated settings*/
.count2 {animation-iteration-count: 2;}

.countinfinite {animation-iteration-count: infinite;}

.delay-time05 {animation-delay: 0.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: 0.5s;}
.change-time1 {animation-duration: 1s;}
.change-time15 {animation-duration: 1.5s;}
.change-time2 {animation-duration: 2s;}
.change-time25 {animation-duration: 2.5s;}