@charset "utf-8";
/* animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; */


.main .main_visual .text-box{ opacity: 0; }
.main .main_visual.on .text-box{ animation: fadeInLeft 0.5s ease-in-out 0s 1 forwards running; }

.main .main_visual .people{ opacity: 0; }
.main .main_visual.on .people{ animation: fadeInRight 0.5s ease-in-out 0s 1 forwards running; }

.main .number1_section h2.title{ opacity: 0; }
.main .number1_section.on h2.title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.main .number1_section .number-box{ opacity: 0; }
.main .number1_section.on .number-box{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }

.main .number1_section .item-list > li{ opacity: 0; }
.main .number1_section .item-list.on > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.main .number1_section .item-list.on > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; }
.main .number1_section .item-list.on > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0.4s 1 forwards running; }

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

.main .number2_section .content-div{ opacity: 0; }
.main .number2_section.on .content-div{ animation: fadeInLeft 0.5s ease-in-out 0s 1 forwards running; }

.main .number2_section .item{ opacity: 0; }
.main .number2_section.on .item{ animation: fadeInRight 0.5s ease-in-out 0s 1 forwards running; }

.main .possible-section .text{ opacity: 0; }
.main .possible-section.on .text{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.main .number3_section .title-box{ opacity: 0; }
.main .number3_section.on .title-box{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.main .number3_section .title-box .bubble-wrap .bubble{ opacity: 0; }
.main .number3_section.on .title-box .bubble-wrap .bubble1{ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; }
.main .number3_section.on .title-box .bubble-wrap .bubble2{ animation: fadeIn 0.5s ease-in-out 0.5s 1 forwards running; }


.main .number3_section .item-list > li{ opacity: 0; }
.main .number3_section.on .item-list > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.main .number3_section.on .item-list > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.main .number3_section.on .item-list > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; }
.main .number3_section.on .item-list > li:nth-child(4){ animation: fadeIn 0.5s ease-in-out 0.4s 1 forwards running; }

.main .number3_section .btn-wrap{ opacity: 0; }
.main .number3_section.on .btn-wrap{ animation: fadeIn 0.5s ease-in-out 0.6s 1 forwards running; }

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

.main .number4_section .main-title{ opacity: 0; }
.main .number4_section.on .main-title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.main .number4_section .main-content{ opacity: 0; }
.main .number4_section.on .main-content{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }

.main .number4_section .item-list > li{ opacity: 0; }
.main .number4_section.on .item-list > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.main .number4_section.on .item-list > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; }
.main .number4_section.on .item-list > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0.4s 1 forwards running; }
.main .number4_section.on .item-list > li:nth-child(4){ animation: fadeIn 0.5s ease-in-out 0.5s 1 forwards running; }


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

.main .apply-section .half-box .content-box{ opacity: 0; }
.main .apply-section.on .half-box .content-box{ animation: fadeInLeft 0.5s ease-in-out 0s 1 forwards running; }

.main .apply-section .half-box .phone-wrap{ opacity: 0; }
.main .apply-section.on .half-box .phone-wrap{ animation: fadeInRight 0.5s ease-in-out 0s 1 forwards running; }

@media screen and (max-width: 650px) {
    .main .apply-section.on .half-box .content-box{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
    .main .apply-section.on .half-box .phone-wrap{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
}

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


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