@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(-0.7%) ; /* 위로 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; }
}

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

section.sec1 .text_1 { animation: showHide 1.5s ease-in-out 1s ; animation-delay: 0.1s; }
section.sec1 .item .stick { animation: showHide 1.5s ease-in-out 1s ; animation-delay: 0.2s; }
section.sec1 .text_2 { animation: showHide 1.5s ease-in-out 1s ; animation-delay: 0.1s; }
section.sec1 .sec1_img.sec1_img1 { animation: float 2s ease-in-out infinite 0.5s; animation-delay: 0.3s; }
section.sec1 .sec1_img.sec1_img2 { animation: float 2s ease-in-out infinite 0.5s; animation-delay: 0.1s; }
section.sec1 .sec1_img.sec1_img3 { animation: float 2s ease-in-out infinite 0.5s; animation-delay: 0.3s; }
section.sec1 .sec1_img.sec1_img4 { animation: float 2s ease-in-out infinite 0.5s; animation-delay: 0.1s; }
section.sec1 .sec1_img.sec1_img5 { animation: float 2s ease-in-out infinite 0.5s; animation-delay: 0.3s; }
section.sec1 .sec1_img.sec1_img6 { animation: float 2s ease-in-out infinite 0.5s; animation-delay: 0.1s; }

section.sec2 .inner { opacity: 0; }
section.sec2.on .inner { animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }

section.sec3 .title { opacity: 0; }
section.sec3 .sub_title { opacity: 0; }

section.sec3.on .title { animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.3s;  }
section.sec3.on .sub_title { animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }

section.sec3 .sec3_ul > li.list1 { opacity: 0; }
section.sec3.on .sec3_ul > li.list1 { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

section.sec3 .sec3_ul > li.list2 { opacity: 0; }
section.sec3 .sec3_ul > li.list2.on { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: ; }

section.sec3 .sec3_ul > li.list3 { opacity: 0; }
section.sec3 .sec3_ul > li.list3.on { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }

section.sec3 .sec3_ul > li.list4 { opacity: 0; }
section.sec3 .sec3_ul > li.list4.on { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

section.sec3 .sec3_ul > li.list5 { opacity: 0; }
section.sec3 .sec3_ul > li.list5.on { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

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

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

section.sec5 .sec5_ul li.list1 { opacity: 0; }
section.sec5 .sec5_ul.on li.list1 { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.2s;  }
section.sec5 .sec5_ul li.list2 { opacity: 0; }
section.sec5 .sec5_ul.on li.list2 { animation: fadeIn 1s ease-in-out 0s 1 forwards running; animation-delay: 0.4s;  }

section.sec6 .title { opacity: 0; }
section.sec6.on .title { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running;  }
section.sec6 .sub_title { opacity: 0; }
section.sec6.on .sub_title { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running;  }
section.sec6 .text_1 { opacity: 0; }
section.sec6.on .text_1 { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
section.sec6 .videoBox { opacity: 0; }
section.sec6.on .videoBox { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }

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