@charset "utf-8";
@keyframes shake {
    0% { transform: rotate(0deg);  }
    25% { transform: rotate(3deg) translateX(2px); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-3deg) translateX(-2px); }
    100% { transform: rotate(0deg); }
}
@keyframes float {
    0% { transform: translateY(0) ; }
    50% { transform: translateY(-4%) ; /* 위로 30px 떠오르기 */ }
    100% { transform: translateY(0) ; /* 원래 위치로 돌아오기 */ }
}
@keyframes fadeIn {
    0% { opacity: 0; transform: translate3d(0px, 30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInRight {
    0% { opacity: 1; 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; }
}

/* mainVisual */
/* section.mainVisual .mainDiv .main_img { opacity: 0; } */
section.mainVisual.on .mainDiv .main_img{ animation: float 3s ease-in-out infinite 0.7s; /* 0.7초 지연 후 float 실행 */ }

section.mainVisual .item .videoDiv { opacity: 0; }
section.mainVisual.on .item .videoDiv { animation: fadeIn 1s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

/* roadMap */
section.roadMap p.title { opacity: 0; }
section.roadMap.on p.title { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
section.roadMap p.subTitle { opacity: 0; }
section.roadMap.on p.subTitle { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }

section.roadMap .roadmapUl .roadList { opacity: 0; }
section.roadMap.on .roadmapUl .roadList1 { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running;animation-delay: 0.2s; }
section.roadMap.on .roadmapUl .roadList2 { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
section.roadMap.on .roadmapUl .roadList3 { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
section.roadMap.on .roadmapUl .roadList4 { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }

section.roadMap .roadBox .road_img_1 { animation: shake 2s ease-in-out infinite; }


/* how */
section.how p.title { opacity: 0; }
section.how.on p.title { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }

section.how .howUl li { opacity: 0; } 
section.how.on .howUl li:nth-of-type(1) { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
section.how.on .howUl li:nth-of-type(2) { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
section.how.on .howUl li:nth-of-type(3) { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }

/* coin */

section.coin .inner p.title { opacity: 0; }
section.coin .inner.on p.title { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }

section.coin .aboutArti .qnaList { opacity: 0; }
section.coin .aboutArti.on .qnaList { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

/* 3/24 */
section.about .inner { opacity: 0; }
section.about.on .inner { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
section.about .img1 { animation: shake 3s ease-in-out infinite; }

section.how .c_div { opacity: 0; }
section.how.on .c_div { animation: fadeInLeft 0.7s ease-in-out 0s 1 forwards running; }
section.how .c_div .img2 { animation: shake 3s ease-in-out infinite; }



section.road .c_div { opacity: 0; }
section.road.on .c_div { animation: fadeInLeft 0.7s ease-in-out 0s 1 forwards running; }
section.road .c_div .img6 { animation: float 2s ease-in-out infinite; }

section.token .c_div { opacity: 0; }
section.token.on .c_div { animation: fadeInRight 0.7s ease-in-out 0s 1 forwards running; }
section.token .c_div .img3 { animation: float 2s ease-in-out infinite;  }
section.token .img4 { animation: float 2s ease-in-out infinite;  }

main section.coin .aboutArti .img7 { animation: shake 3s ease-in-out infinite; }

section.coin .aboutArti { opacity: 0; }
section.coin.on .aboutArti { animation: fadeInRight 0.7s ease-in-out 0s 1 forwards running; }