@charset "utf-8";

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

.main .visualArti .circle{ opacity: 0; }
.main .visualArti .circle1{ animation: smallToBig 6s ease-in-out infinite;  }
.main .visualArti .circle2{ animation: smallToBig 6s ease-in-out infinite; animation-delay: 1s; }
.main .visualArti .circle3{ animation: smallToBig 6s ease-in-out infinite; animation-delay: 2s; }
.main .visualArti .circle4{ opacity: 1; }
.main .visualArti .circle5{ opacity: 1; }

.main .visualArti .textDiv .title{ opacity: 0; }
.main .visualArti.on .textDiv .title{ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; }
.main .visualArti .textDiv .content{ opacity:0; }
.main .visualArti.on .textDiv .content{ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .visualArti .btnWrap .blueBtn{ opacity: 0; }
.main .visualArti.on .btnWrap .blueBtn{ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.8s; }

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

.main .expertArti .halfBox > li{ opacity: 0; }
.main .expertArti.on .halfBox > li:nth-child(1){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.main .expertArti.on .halfBox > li:nth-child(2){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .expertArti.on .halfBox > li:nth-child(3){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }
.main .expertArti.on .halfBox > li:nth-child(4){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.6s; }

.main .priceArti .bigTitle{ opacity: 0; }
.main .priceArti.on .bigTitle{ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; }
.main .priceArti .priceBox .priceWrap{ opacity: 0; }
.main .priceArti.on .priceBox .priceWrap{ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }

.main .additionArti .halfBox > li{ opacity: 0; }
.main .additionArti.on .halfBox > li:nth-child(1){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.main .additionArti.on .halfBox > li:nth-child(2){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .additionArti.on .halfBox > li:nth-child(3){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }
.main .additionArti.on .halfBox > li:nth-child(4){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.6s; }

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


.main .processArti .stepList > li{ opacity: 0; }
.main .processArti.on .stepList > li:nth-child(1){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.3s; }
.main .processArti.on .stepList > li:nth-child(2){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.4s; }
.main .processArti.on .stepList > li:nth-child(3){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.5s; }
.main .processArti.on .stepList > li:nth-child(4){ animation: fadeIn 0.8s ease-in-out 0s 1 forwards running; animation-delay: 0.6s; }

.main .priceArti::before{ animation: showHide 1.5s ease-in-out infinite alternate; }
.main .priceArti::after{ animation: showHide 1.5s ease-in-out infinite alternate; animation-delay: 1s; }

@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.2); }
    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; }
}