@charset "utf-8";

/* animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; */

.main .bannerArti .title{ opacity: 0; }
.main .bannerArti.on .title{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .bannerArti .content{ opacity: 0; }
.main .bannerArti.on .content{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.main .bannerArti .applyBtn{ opacity: 0; }
.main .bannerArti.on .applyBtn{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }


.main .posterArti .halfBox img{ opacity: 0; }
.main .posterArti.on .halfBox .poster{ animation: fadeInLeft 0.7s ease-in-out 0s 1 forwards running; }
.main .posterArti.on .halfBox .content{ animation: fadeInRight 0.7s ease-in-out 0s 1 forwards running; }

.main .greetingsArti .halfBox .contentBox{ opacity: 0; }
.main .greetingsArti.on .halfBox .contentBox{ animation: fadeInLeft 0.7s ease-in-out 0s 1 forwards running; }
.main .greetingsArti .halfBox .people{ opacity: 0; }
.main .greetingsArti.on .halfBox .people{ animation: fadeInRight 0.7s ease-in-out 0s 1 forwards running; }

.main .courseArti .tabDiv{ opacity: 0; }
.main .courseArti.on .tabDiv{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }

.main .mapArti .halfBox{ opacity: 0; }
.main .mapArti.on .halfBox{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }

.main .applyArti .halfBox{ opacity: 0; }
.main .applyArti.on .halfBox{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }


@keyframes fadeIn {
    0% { opacity: 0; transform: translate3d(0px, 30px, 0px); }
    /* 50% { opacity: .6; } */
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translate3d(30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translate3d(-30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInLeftNonOpacity {
    0% { transform: translate3d(-30px, 0, 0px); }
    100% { transform: translate3d(0px, 0px, 0px); }
}
@keyframes scale {
    0% { opacity: 0; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes showHide {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes smallToBig {
    0% { transform: scale(0); opacity: 1; }
    90% { transform: scale(2); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}