@charset "utf-8";

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

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

.main .perfomanceArti .title{ opacity: 0; }
.main .perfomanceArti.on .title{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .perfomanceArti .banner{ opacity: 0; }
.main .perfomanceArti.on .banner{ animation: fadeIn 0.7s ease-in-out .2s 1 forwards running; }
.main .perfomanceArti .category_li{ opacity: 0; }
.main .perfomanceArti.on .category_li{ animation: fadeIn 0.7s ease-in-out .4s 1 forwards running; }

.main .main_title{ opacity: 0; }
.main .on .main_title{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .successArti .slideBox{ opacity: 0; }
.main .successArti.on .slideBox{ animation: fadeIn 0.7s ease-in-out .2s 1 forwards running; }
.mainApplyArti .halfBox{ opacity: 0; }
.mainApplyArti.on .halfBox{ animation: fadeIn 0.7s ease-in-out .2s 1 forwards running; }

.sub .subBannerArti .title::before{ letter-spacing: -0.1em; }
.sub .subBannerArti.on .title::before{ animation: bannerText 1.2s ease-in-out 0s 1 forwards running; }

.menu1 .aobutArti .blackBox{ opacity: 0; }
.menu1 .aobutArti.on .blackBox{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }

.menu2 .listArti .inner{ opacity: 0; }
.menu2 .listArti.on .inner{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }


.menu3 .categoryListArti .categoryList{ opacity: 0; }
.menu3 .categoryListArti.on .categoryList{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }

.menu4 .achiveListArti .inner{ opacity: 0; }
.menu4 .achiveListArti .inner{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }

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

.main .bannerArti .text_logo.show{ animation: fadeInIntro 1.7s ease-in-out 0s 1 forwards running; }
.main .bannerArti .logo.show{  animation: fadeInIntroBg 1.4s ease-in-out 0s 1 forwards running; }
.main .bannerArti .logo{ transition: opacity .5s; }
.main .bannerArti .logo.hide{ opacity: 0; }
@keyframes fadeInIntro {
    0% {transform: translate3d(0px, 30px, 0px); }
    50% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
    100% { opacity: 0; }
}
@keyframes fadeInIntroBg {
    0% { opacity: .2; }
    50% { opacity: .2; }
    100% { opacity: 0; }
}

@keyframes bannerText {
    0% { opacity: 0; letter-spacing: -0.1em; }
    100% { opacity: .1; letter-spacing: -0.04em; }
}


@keyframes fadeIn {
    0% {transform: translate3d(0px, 30px, 0px); }
    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 scale {
    0% { opacity: 0; transform: scale(.2); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes showHide {
    0%, 100% { opacity: 0; } 
    50% { opacity: 1; } 
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}