@charset "utf-8";

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

/* section.sec1.on .inner { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; } */


section.sec2 .text_1 { opacity: 0; } 
section.sec2.on .text_1 { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; ; }
section.sec2 .sec2_logo { opacity: 0; } 
section.sec2.on .sec2_logo { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
section.sec2 .text_2 { opacity: 0; } 
section.sec2.on .text_2 { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }

section.sec3 .title { opacity: 0; } 
section.sec3.on .title { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
section.sec3 li { opacity: 0; } 
section.sec3.on li:nth-of-type(1) { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
section.sec3 li { opacity: 0; } 
section.sec3.on li:nth-of-type(2) { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
section.sec3 li { opacity: 0; } 
section.sec3.on li:nth-of-type(3) { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }

section.sec4 .title { opacity: 0; } 
section.sec4.on .title { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
section.sec4 li { opacity: 0; } 
section.sec4.on li:nth-of-type(1) { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
section.sec4 li { opacity: 0; } 
section.sec4.on li:nth-of-type(2) { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
section.sec4 li { opacity: 0; } 
section.sec4.on li:nth-of-type(3) { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }

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

section.sec6 .title { opacity: 0; } 
section.sec6.on .title { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
section.sec6 .sec6_div .content1 { opacity: 0; } 
section.sec6.on .sec6_div .content1 { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
section.sec6 .sec6_div .content2 { opacity: 0; } 
section.sec6.on .sec6_div .content2 { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running ; animation-delay: 0.7s; }

section.sec7 .title { opacity: 0; } 
section.sec7.on .title { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
section.sec7 .qnaList { opacity: 0; } 
section.sec7.on .qnaList { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }

section.sec8 .sec8_div .content1 .box1 { opacity: 0; } 
section.sec8.on .sec8_div .content1 .box1 { animation: fadeInLeft 0.7s ease-in-out 0s 1 forwards running;  }
section.sec8 .sec8_div .content1 .box2 { opacity: 0; } 
section.sec8.on .sec8_div .content1 .box2 { animation: fadeInRight 0.7s ease-in-out 0s 1 forwards running; }
section.sec8 .sec8_div .content2 .box1 { opacity: 0; } 
section.sec8.on .sec8_div .content2 .box1 { animation: fadeInLeft 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s;}
section.sec8 .sec8_div .content2 .box2 { opacity: 0; } 
section.sec8.on .sec8_div .content2 .box2 { animation: fadeInRight 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s;}

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


@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; }
}