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


/* .main .banner-section */
.main .banner-section .blur-div .bubble{ opacity: 0; }
.main .banner-section.on .blur-div .bubble{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .banner-section .blur-div .center-text{ opacity: 0; }
.main .banner-section.on .blur-div .center-text{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }  
.main .banner-section .blur-div .bg-div{ opacity: 0; }
.main .banner-section.on .blur-div .bg-div{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }  
.main .banner-section .blur-div .item-list{ opacity:0; }
.main .banner-section.on .blur-div .item-list{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }  
.main .banner-section .blur-div .big-center{ opacity: 0; }
.main .banner-section.on .blur-div .big-center{ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; } 
.main .banner-section .blur-div .kakao-link{ opacity: 0; }
.main .banner-section.on .blur-div .kakao-link{ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; } 
.main .banner-section .scroll-div img{ animation: bounce 2s ease-in-out 0s infinite; }

.main .allinone-section .main-title{ opacity: 0; }
.main .allinone-section.on .main-title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .allinone-section .label{ opacity: 0; }
.main .allinone-section.on .label{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.main .allinone-section .content-wrap .space-content{ opacity: 0; }
.main .allinone-section.on .content-wrap .space-content:first-child{ animation: fadeInLeft 0.5s ease-in-out 0.1s 1 forwards running; }
.main .allinone-section.on .content-wrap .space-content:last-child{ animation: fadeInRight 0.5s ease-in-out 0.1s 1 forwards running; }

.main .representative-section .main-title{ opacity: 0; }
.main .representative-section.on .main-title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .representative-section .half-box .profile{ opacity: 0; }
.main .representative-section.on .half-box .profile{ animation: fadeInLeft 0.5s ease-in-out 0s 1 forwards running; }
.main .representative-section .half-box .content{ opacity: 0; }
.main .representative-section.on .half-box .content{ animation: fadeInRight 0.5s ease-in-out 0s 1 forwards running; }
.main .representative-section .bottom-div{ opacity: 0; }
.main .representative-section.on .bottom-div{ animation: fadeIn 0.5s ease-in-out .2s 1 forwards running; }

.main .representative-section .bottom-div .btn-a .info{ animation: bounce2 2s ease-in-out 0s infinite; }

.main .design-section .main-title{ opacity: 0; }
.main .design-section.on .main-title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .design-section .main-content{ opacity: 0; }
.main .design-section.on .main-content{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.main .design-section .item-list{ opacity: 0; }
.main .design-section.on .item-list{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.main .design-section .label-content{ opacity: 0; }
.main .design-section.on .label-content{ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; }

.main .guide-section .main-title{ opacity: 0; }
.main .guide-section.on .main-title{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.main .guide-section .step-table{ opacity: 0; }
.main .guide-section.on .step-table{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.main .guide-section .step-arrow{ opacity: 0; }
.main .guide-section.on .step-arrow{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.main .guide-section .title-box{ opacity: 0; }
.main .guide-section.on .title-box{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }

.main .success-section .main-title{ opacity: 0; }
.main .success-section.on .main-title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .success-section .main-content{ opacity: 0; }
.main .success-section.on .main-content{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.main .success-section .item-list{ opacity: 0; }
.main .success-section.on .item-list{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.main .success-section .bar-text{ opacity: 0; }
.main .success-section.on .bar-text{ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; }
.main .success-section .btn-wrap{ opacity: 0; }
.main .success-section.on .btn-wrap{ animation: fadeIn 0.5s ease-in-out 0.4s 1 forwards running; }

.main .collect-section .main-title{ opacity: 0; }
.main .collect-section.on .main-title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .collect-section .main-content{ opacity: 0; }
.main .collect-section.on .main-content{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.main .collect-section .item-list{ opacity: 0; }
.main .collect-section.on .item-list{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }

.main .qna-section .main-title{ opacity: 0; }
.main .qna-section.on .main-title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .qna-section .main-content{ opacity: 0; }
.main .qna-section.on .main-content{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.main .qna-section .qna-list{ opacity: 0; }
.main .qna-section.on .qna-list { animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }

.main .apply-section .main-title{ opacity: 0; }
.main .apply-section.on .main-title{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .apply-section .main-content{ opacity: 0; }
.main .apply-section.on .main-content{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.main .apply-section .apply-box{ opacity: 0; }
.main .apply-section.on .apply-box{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }

@keyframes bounce2 {
    0%   { transform: translateY(0); opacity: 1; }
    50%  { transform: translateY(10px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes bounce {
    0%   { transform: translateY(0); opacity: 0.6; }
    50%  { transform: translateY(10px); opacity: 1; }
    100% { transform: translateY(0); opacity: 0.6; }
}
@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); }
}