/* CSS3 ANIMA */
/* school-building */
@keyframes school-building{
    from { right: -100%; }
    to { right: 0; }
}
@-moz-keyframes school-building{
    from { right: -100%; }
    to { right: 0; }
}
@-webkit-keyframes school-building{
    from { right: -100%; }
    to { right: 0; }
}
@-o-keyframes school-building{
    from { right: -100%; }
    to { right: 0; }
}
#header .school-building{
    animation: school-building 2s forwards;
    -moz-animation: school-building 2s forwards;
    -webkit-animation: school-building 2s forwards;
    -o-animation: school-building 2s forwards;
}
/* photo1 */
@keyframes photo1-ani{
    0% { left: -15%; top: 120%; }
    40% { left: -15%; top: 120%; }
    60% { left: -5%; top: 14%; }
    100% { left: -5%; top: 14%; }
}
@-o-keyframes photo1-ani{
    0% { left: -15%; top: 120%; }
    40% { left: -15%; top: 120%; }
    60% { left: -5%; top: 14%; }
    100% { left: -5%; top: 14%; }
}
@-moz-keyframes photo1-ani{
    0% { left: -15%; top: 120%; }
    40% { left: -15%; top: 120%; }
    60% { left: -5%; top: 14%; }
    100% { left: -5%; top: 14%; }
}
@-webkit-keyframes photo1-ani{
    0% { left: -15%; top: 120%; }
    40% { left: -15%; top: 120%; }
    60% { left: -5%; top: 14%; }
    100% { left: -5%; top: 14%; }
}
#header .photo.photo1{
    animation: photo1-ani 8s 0s infinite alternate forwards;
    -moz-animation: photo1-ani 8s 0s infinite alternate forwards;
    -webkit-animation: photo1-ani 8s 0s infinite alternate forwards;
    -o-animation: photo1-ani 8s 0s infinite alternate forwards;
}
/* photo2 */
@keyframes photo2-ani{
    0% { left: 20%; top: 120%; }
    40% { left: 20%; top: 120%; }
    60% { left: 17%; top: 14%; }
    100% { left: 17%; top: 14%; }
}
@-o-keyframes photo2-ani{
    0% { left: 20%; top: 120%; }
    40% { left: 20%; top: 120%; }
    60% { left: 17%; top: 14%; }
    100% { left: 17%; top: 14%; }
}
@-moz-keyframes photo2-ani{
    0% { left: 20%; top: 120%; }
    40% { left: 20%; top: 120%; }
    60% { left: 17%; top: 14%; }
    100% { left: 17%; top: 14%; }
}
@-webkit-keyframes photo2-ani{
    0% { left: 20%; top: 120%; }
    40% { left: 20%; top: 120%; }
    60% { left: 17%; top: 14%; }
    100% { left: 17%; top: 14%; }
}
#header .photo.photo2{
    animation: photo2-ani 8s 0s infinite alternate forwards;
    -moz-animation: photo2-ani 8s 0s infinite alternate forwards;
    -webkit-animation: photo2-ani 8s 0s infinite alternate forwards;
    -o-animation: photo2-ani 8s 0s infinite alternate forwards;
}
/* photo3 */
@keyframes photo3-ani{
    0% { left: 38%; top: 120%; }
    40% { left: 38%; top: 120%; }
    60% { left: 43%; top: 14%; }
    100% { left: 43%; top: 14%; }
}
@-o-keyframes photo3-ani{
    0% { left: 38%; top: 120%; }
    40% { left: 38%; top: 120%; }
    60% { left: 43%; top: 14%; }
    100% { left: 43%; top: 14%; }
}
@-moz-keyframes photo3-ani{
    0% { left: 38%; top: 120%; }
    40% { left: 38%; top: 120%; }
    60% { left: 43%; top: 14%; }
    100% { left: 43%; top: 14%; }
}
@-webkit-keyframes photo3-ani{
    0% { left: 38%; top: 120%; }
    40% { left: 38%; top: 120%; }
    60% { left: 43%; top: 14%; }
    100% { left: 43%; top: 14%; }
}
#header .photo.photo3{
    animation: photo3-ani 8s 0s infinite alternate forwards;
    -moz-animation: photo3-ani 8s 0s infinite alternate forwards;
    -webkit-animation: photo3-ani 8s 0s infinite alternate forwards;
    -o-animation: photo3-ani 8s 0s infinite alternate forwards;
}

/* photo4 */
@keyframes photo4-ani{
    0% { left: -15%; top: 120%; }
    40% { left: -15%; top: 120%; }
    60% { left: -5%; top: 14%; }
    100% { left: -5%; top: 14%; }
}
@-o-keyframes photo4-ani{
    0% { left: -15%; top: 120%; }
    40% { left: -15%; top: 120%; }
    60% { left: -5%; top: 14%; }
    100% { left: -5%; top: 14%; }
}
@-moz-keyframes photo4-ani{
    0% { left: -15%; top: 120%; }
    40% { left: -15%; top: 120%; }
    60% { left: -5%; top: 14%; }
    100% { left: -5%; top: 14%; }
}
@-webkit-keyframes photo4-ani{
    0% { left: -15%; top: 120%; }
    40% { left: -15%; top: 120%; }
    60% { left: -5%; top: 14%; }
    100% { left: -5%; top: 14%; }
}
#header .photo.photo4{
    animation: photo4-ani 8s 0s infinite alternate-reverse forwards;
    -moz-animation: photo4-ani 8s 0s infinite alternate-reverse forwards;
    -webkit-animation: photo4-ani 8s 0s infinite alternate-reverse forwards;
    -o-animation: photo4-ani 8s 0s infinite alternate-reverse forwards;
}
/* photo5 */
@keyframes photo5-ani{
    0% { left: 20%; top: 120%; }
    40% { left: 20%; top: 120%; }
    60% { left: 17%; top: 14%; }
    100% { left: 17%; top: 14%; }
}
@-o-keyframes photo5-ani{
    0% { left: 20%; top: 120%; }
    40% { left: 20%; top: 120%; }
    60% { left: 17%; top: 14%; }
    100% { left: 17%; top: 14%; }
}
@-moz-keyframes photo5-ani{
    0% { left: 20%; top: 120%; }
    40% { left: 20%; top: 120%; }
    60% { left: 17%; top: 14%; }
    100% { left: 17%; top: 14%; }
}
@-webkit-keyframes photo5-ani{
    0% { left: 20%; top: 120%; }
    40% { left: 20%; top: 120%; }
    60% { left: 17%; top: 14%; }
    100% { left: 17%; top: 14%; }
}
#header .photo.photo5{
    animation: photo5-ani 8s 0s infinite alternate-reverse forwards;
    -moz-animation: photo5-ani 8s 0s infinite alternate-reverse forwards;
    -webkit-animation: photo5-ani 8s 0s infinite alternate-reverse forwards;
    -o-animation: photo5-ani 8s 0s infinite alternate-reverse forwards;
}
/* photo6 */
@keyframes photo6-ani{
    0% { left: 38%; top: 120%; }
    40% { left: 38%; top: 120%; }
    60% { left: 43%; top: 14%; }
    100% { left: 43%; top: 14%; }
}
@-o-keyframes photo6-ani{
    0% { left: 38%; top: 120%; }
    40% { left: 38%; top: 120%; }
    60% { left: 43%; top: 14%; }
    100% { left: 43%; top: 14%; }
}
@-moz-keyframes photo6-ani{
    0% { left: 38%; top: 120%; }
    40% { left: 38%; top: 120%; }
    60% { left: 43%; top: 14%; }
    100% { left: 43%; top: 14%; }
}
@-webkit-keyframes photo6-ani{
    0% { left: 38%; top: 120%; }
    40% { left: 38%; top: 120%; }
    60% { left: 43%; top: 14%; }
    100% { left: 43%; top: 14%; }
}
#header .photo.photo6{
    animation: photo6-ani 8s 0s infinite alternate-reverse forwards;
    -moz-animation: photo6-ani 8s 0s infinite alternate-reverse forwards;
    -webkit-animation: photo6-ani 8s 0s infinite alternate-reverse forwards;
    -o-animation: photo6-ani 8s 0s infinite alternate-reverse forwards;
}

/* bee */
@keyframes bee-ani{
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(10deg); }
}
@-o-keyframes bee-ani{
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(10deg); }
}
@-moz-keyframes bee-ani{
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(10deg); }
}
@-webkit-keyframes bee-ani{
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(10deg); }
}
#header .decorate-item.bee{
    animation: bee-ani .6s linear 0s infinite alternate;
    -moz-animation: bee-ani .6s linear 0s infinite alternate;
    -webkit-animation: bee-ani .6s linear 0s infinite alternate;
    -o-animation: bee-ani .6s linear 0s infinite alternate;
}
/* flower1-2 flower2-1*/
@keyframes flower-rotate-ani{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg);}
}
@-o-keyframes flower-rotate-ani{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg);}
}
@-moz-keyframes flower-rotate-ani{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg);}
}
@-webkit-keyframes flower-rotate-ani{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg);}
}
#header .decorate-item.flower1-2{
    animation: flower-rotate-ani 3s linear 0s infinite;
    -moz-animation: flower-rotate-ani 3s linear 0s infinite;
    -webkit-animation: flower-rotate-ani 3s linear 0s infinite;
    -o-animation: flower-rotate-ani 3s linear 0s infinite;
}
#header .decorate-item.flower2-1{
    animation: flower-rotate-ani 2s linear 0s infinite;
    -moz-animation: flower-rotate-ani 2s linear 0s infinite;
    -webkit-animation: flower-rotate-ani 2s linear 0s infinite;
    -o-animation: flower-rotate-ani 2s linear 0s infinite;
}
/* word-1 */
@keyframes word-1-ani{
    0% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@-o-keyframes word-1-ani{
    0% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@-moz-keyframes word-1-ani{
    0% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@-webkit-keyframes word-1-ani{
    0% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
#header .decorate-item.subtitle img.word-1{
    animation: word-1-ani 1s linear 0s infinite alternate;
    -moz-animation: word-1-ani 1s linear 0s infinite alternate;
    -webkit-animation: word-1-ani 1s linear 0s infinite alternate;
    -o-animation: word-1-ani 1s linear 0s infinite alternate;
}
/* word-2 */
@keyframes word-2-ani{
    0% { transform: rotate(-10deg); }
    100% { transform: rotate(10deg); }
}
@-o-keyframes word-2-ani{
    0% { transform: rotate(-10deg); }
    100% { transform: rotate(10deg); }
}
@-moz-keyframes word-2-ani{
    0% { transform: rotate(-10deg); }
    100% { transform: rotate(10deg); }
}
@-webkit-keyframes word-2-ani{
    0% { transform: rotate(-10deg); }
    100% { transform: rotate(10deg); }
}
#header .decorate-item.subtitle img.word-2{
    animation: word-2-ani .5s linear 0s infinite alternate;
    -moz-animation: word-2-ani .5s linear 0s infinite alternate;
    -webkit-animation: word-2-ani .5s linear 0s infinite alternate;
    -o-animation: word-2-ani .5s linear 0s infinite alternate;
}
/* word-3 */
@keyframes word-3-ani{
    0% { transform: scaleY(1); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}
@-o-keyframes word-3-ani{
    0% { transform: scaleY(1); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}
@-moz-keyframes word-3-ani{
    0% { transform: scaleY(1); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}
@-webkit-keyframes word-3-ani{
    0% { transform: scaleY(1); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}
#header .decorate-item.subtitle img.word-3{
    animation: word-3-ani .5s linear 0s infinite alternate;
    -moz-animation: word-3-ani .5s linear 0s infinite alternate;
    -webkit-animation: word-3-ani .5s linear 0s infinite alternate;
    -o-animation: word-3-ani .5s linear 0s infinite alternate;
}
/* word-4 */
@keyframes word-4-ani{
    0% { transform: translateX(-.1vw);}
    100% { transform: translateX(.1vw);}
}
@-o-keyframes word-4-ani{
    0% { transform: translateX(-.1vw);}
    100% { transform: translateX(.1vw);}
}
@-moz-keyframes word-4-ani{
    0% { transform: translateX(-.1vw);}
    100% { transform: translateX(.1vw);}
}
@-webkit-keyframes word-4-ani{
    0% { transform: translateX(-.1vw);}
    100% { transform: translateX(.1vw);}
}
#header .decorate-item.subtitle img.word-4{
    animation: word-4-ani .5s linear 0s infinite alternate;
    -moz-animation: word-4-ani .5s linear 0s infinite alternate;
    -webkit-animation: word-4-ani .5s linear 0s infinite alternate;
    -o-animation: word-4-ani .5s linear 0s infinite alternate;
}

/* video */
@keyframes frame-ani{
    0% { transform: rotate(-8deg); }
    100% { transform: rotate(8deg); }
}
@-o-keyframes frame-ani{
    0% { transform: rotate(-8deg); }
    100% { transform: rotate(8deg); }
}
@-moz-keyframes frame-ani{
    0% { transform: rotate(-8deg); }
    100% { transform: rotate(8deg); }
}
@-webkit-keyframes frame-ani{
    0% { transform: rotate(-8deg); }
    100% { transform: rotate(8deg); }
}
.video-a:hover .frame{
    animation: frame-ani .3s linear 0s forwards;
    -moz-animation: frame-ani .3s linear 0s forwards;
    -webkit-animation: frame-ani .3s linear 0s forwards;
    -o-animation: frame-ani .3s linear 0s forwards;
}
@keyframes pic-ani{
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}
@-o-keyframes pic-ani{
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}
@-moz-keyframes pic-ani{
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}
@-webkit-keyframes pic-ani{
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}
.video-a:hover .pic > img{
    animation: pic-ani .3s linear 0s forwards;
    -moz-animation: pic-ani .3s linear 0s forwards;
    -webkit-animation: pic-ani .3s linear 0s forwards;
    -o-animation: pic-ani .3s linear 0s forwards;
}
@keyframes frame-ani-reverse{
    0% { transform: rotate(8deg); }
    100% { transform: rotate(-8deg); }
}
@-o-keyframes frame-ani-reverse{
    0% { transform: rotate(8deg); }
    100% { transform: rotate(-8deg); }
}
@-moz-keyframes frame-ani-reverse{
    0% { transform: rotate(8deg); }
    100% { transform: rotate(-8deg); }
}
@-webkit-keyframes frame-ani-reverse{
    0% { transform: rotate(8deg); }
    100% { transform: rotate(-8deg); }
}
.video-a .frame{
    animation: frame-ani-reverse .3s linear 0s forwards;
    -moz-animation: frame-ani-reverse .3s linear 0s forwards;
    -webkit-animation: frame-ani-reverse .3s linear 0s forwards;
    -o-animation: frame-ani-reverse .3s linear 0s forwards;
}
@keyframes pic-ani-reverse{
    0% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@-o-keyframes pic-ani-reverse{
    0% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@-moz-keyframes pic-ani-reverse{
    0% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@-webkit-keyframes pic-ani-reverse{
    0% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.video-a .pic > img{
    animation: pic-ani-reverse .3s linear 0s forwards;
    -moz-animation: pic-ani-reverse .3s linear 0s forwards;
    -webkit-animation: pic-ani-reverse .3s linear 0s forwards;
    -o-animation: pic-ani-reverse .3s linear 0s forwards;
}

/* #content .decorate-wrap .flower2-1 */
#content .decorate-wrap .flower2-1{
    animation: flower-rotate-ani 3s linear 0s infinite;
    -moz-animation: flower-rotate-ani 3s linear 0s infinite;
    -webkit-animation: flower-rotate-ani 3s linear 0s infinite;
    -o-animation: flower-rotate-ani 3s linear 0s infinite;
}

/* #content .decorate-wrap .bee1 */
@keyframes bee1-ani{
    0% { transform: translateY(-.5vw); }
    100% { transform: translateY(.5vw); }
}
@-o-keyframes bee1-ani{
    0% { transform: translateY(-.5vw); }
    100% { transform: translateY(.5vw); }
}
@-moz-keyframes bee1-ani{
    0% { transform: translateY(-.5vw); }
    100% { transform: translateY(.5vw); }
}
@-webkit-keyframes bee1-ani{
    0% { transform: translateY(-.5vw); }
    100% { transform: translateY(.5vw); }
}
#content .decorate-wrap .bee1{
    animation: bee1-ani .6s linear 0s infinite alternate;
    -moz-animation: bee1-ani .6s linear 0s infinite alternate;
    -webkit-animation: bee1-ani .6s linear 0s infinite alternate;
    -o-animation: bee1-ani .6s linear 0s infinite alternate;
}
/* #content .decorate-wrap .bee2 */
@keyframes bee2-ani{
    0% { transform: translateX(-.5vw); }
    100% { transform: translateX(.5vw); }
}
@-o-keyframes bee2-ani{
    0% { transform: translateX(-.5vw); }
    100% { transform: translateX(.5vw); }
}
@-moz-keyframes bee2-ani{
    0% { transform: translateX(-.5vw); }
    100% { transform: translateX(.5vw); }
}
@-webkit-keyframes bee2-ani{
    0% { transform: translateX(-.5vw); }
    100% { transform: translateX(.5vw); }
}
#content .decorate-wrap .bee2{
    animation: bee2-ani .6s linear 0s infinite alternate;
    -moz-animation: bee2-ani .6s linear 0s infinite alternate;
    -webkit-animation: bee2-ani .6s linear 0s infinite alternate;
    -o-animation: bee2-ani .6s linear 0s infinite alternate;
}