@charset "utf-8";

/* animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; */

.main .mainVisual .contentWrap .title{ opacity: 0; }
.main .mainVisual .contentWrap .content{ opacity: 0; }
.main .mainVisual .contentWrap .contentBox{ opacity: 0; }

.main .mainVisual.on .contentWrap .title{ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; }
.main .mainVisual.on .contentWrap .content{ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.main .mainVisual.on .contentWrap .contentBox{ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

.main .freeService .itemList > li{ opacity: 0; }
.main .freeService.on .itemList > li:nth-child(1){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; }
.main .freeService.on .itemList > li:nth-child(2){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.main .freeService.on .itemList > li:nth-child(3){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .freeService.on .itemList > li:nth-child(4){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.main .freeService.on .itemList > li:nth-child(5){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .freeService.on .itemList > li:nth-child(6){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }

.main .freeService .contentBox{ opacity: 0; }
.main .freeService.on .contentBox{ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; }
/* expert */
.expertArti .expert_ul > li{ opacity: 0; }
.expertArti.on .expert_ul > li:nth-child(1){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; }
.expertArti.on .expert_ul > li:nth-child(2){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.expertArti.on .expert_ul > li:nth-child(3){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.expertArti.on .expert_ul > li:nth-child(4){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.expertArti.on .expert_ul > li:nth-child(5){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.expertArti.on .expert_ul > li:nth-child(6){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }
.expertArti.on .expert_ul > li:nth-child(7){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.6s; }
.expertArti.on .expert_ul > li:nth-child(8){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.7s; }


/* expert */
.main .discriminationArti .itemList > li{ opacity: 0; }
.main .discriminationArti.on .itemList > li:nth-child(1){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; }
.main .discriminationArti.on .itemList > li:nth-child(2){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.main .discriminationArti.on .itemList > li:nth-child(3){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .discriminationArti.on .itemList > li:nth-child(4){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.main .discriminationArti.on .itemList > li:nth-child(5){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .discriminationArti.on .itemList > li:nth-child(6){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }
.main .discriminationArti.on .itemList > li:nth-child(7){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.6s; }
.main .discriminationArti.on .itemList > li:nth-child(8){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.7s; }

.main .discriminationArti .table { opacity: 0; }
.main .discriminationArti.on .table { animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .discriminationArti .table_mo { opacity: 0; }
.main .discriminationArti.on .table_mo { animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

.main .proServiceArti .halfBox > li{ opacity: 0; }
.main .proServiceArti.on .halfBox > li:nth-child(1){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; }
.main .proServiceArti.on .halfBox > li:nth-child(2){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }

.main .stepArti .stepBtnList > li{ opacity: 0; }
.main .stepArti.on .stepBtnList > li:nth-child(1){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; }
.main .stepArti.on .stepBtnList > li:nth-child(2){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }
.main .stepArti.on .stepBtnList > li:nth-child(3){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.2s; }
.main .stepArti.on .stepBtnList > li:nth-child(4){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.main .stepArti.on .stepBtnList > li:nth-child(5){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .stepArti.on .stepBtnList > li:nth-child(6){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }
.main .stepArti.on .stepBtnList > li:nth-child(7){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.6s; }
.main .stepArti.on .stepBtnList > li:nth-child(8){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.7s; }
.main .stepArti .contentWrap{ opacity: 0; }
.main .stepArti.on .contentWrap{ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.1s; }

.main .applyArti .halfBox{ opacity: 0; }
.main .applyArti.on .halfBox{ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; }

@keyframes fadeIn {
    0% { opacity: 0; transform: translate3d(0px, 30px, 0px); }
    /* 50% { opacity: .6; } */
    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); }
}
@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; }
}