@charset "utf-8";

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

.main .bannerSection .titleBox .icon.circle1{ animation: scale  2s ease-in-out 0s forwards infinite; }
.main .bannerSection .titleBox .icon.plus1{ opacity: 0; animation: scale  2s ease-in-out 1s forwards infinite; }
.main .bannerSection .titleBox .icon.plus2{ opacity: 0; animation: scale  2s ease-in-out 2s forwards infinite; }

.main .bannerSection .titleBox .t1{ opacity: 0; }
.main .bannerSection.on .titleBox .t1{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .bannerSection .titleBox .t2{ opacity: 0; }
.main .bannerSection.on .titleBox .t2{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }
.main .bannerSection .bar{ opacity: 0; }
.main .bannerSection.on .bar{ animation: fadeIn 0.7s ease-in-out 0.2s 1 forwards running; }
.main .bannerSection .content{ opacity: 0; }
.main .bannerSection.on .content{ animation: fadeIn 0.7s ease-in-out 0.3s 1 forwards running; }

.main .mainTitleBox{ opacity: 0; }
.main .on .mainTitleBox { animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .serviceSection .itemList > li{ opacity: 0; }
.main .serviceSection.on .itemList > li:nth-child(1) { animation: fadeIn 0.7s ease-in-out .1s 1 forwards running; }
.main .serviceSection.on .itemList > li:nth-child(2) { animation: fadeIn 0.7s ease-in-out .2s 1 forwards running; }

.main .serviceSection .itemList .imgBox .circle{ opacity: 0; }
.main .serviceSection.on .itemList > li:nth-child(1) .imgBox .circle{  opacity: 0; animation: bigtosmall  .7s ease-in-out .5s forwards running; }
.main .serviceSection.on .itemList > li:nth-child(2) .imgBox .circle{  opacity: 0; animation: bigtosmall  .7s ease-in-out .8s forwards running; }

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


.main .exampleSection .itemList > li{ opacity: 0; }
.main .exampleSection.on .itemList > li:nth-child(1){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .exampleSection.on .itemList > li:nth-child(2){ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }
.main .exampleSection.on .itemList > li:nth-child(3){ animation: fadeIn 0.7s ease-in-out 0.2s 1 forwards running; }
.main .exampleSection.on .itemList > li:nth-child(4){ animation: fadeIn 0.7s ease-in-out 0.3s 1 forwards running; }

.main .exampleSection .checkList > li{ opacity: 0; }
.main .exampleSection.on .checkList > li:nth-child(1){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .exampleSection.on .checkList > li:nth-child(2){ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }
.main .exampleSection.on .checkList > li:nth-child(3){ animation: fadeIn 0.7s ease-in-out 0.2s 1 forwards running; }

.main .exampleSection .blackBgDiv{  opacity: 0; }
.main .exampleSection.on .blackBgDiv{ animation: fadeIn 0.7s ease-in-out 0.4s 1 forwards running; }


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

.main .resetSection .itemList > li{ opacity: 0; }
.main .resetSection.on .itemList > li:nth-child(1){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .resetSection.on .itemList > li:nth-child(2){ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }
.main .resetSection.on .itemList > li:nth-child(3){ animation: fadeIn 0.7s ease-in-out 0.2s 1 forwards running; }
.main .resetSection.on .itemList > li:nth-child(4){ animation: fadeIn 0.7s ease-in-out 0.3s 1 forwards running; }

.main .stepSection .stepList > li{ opacity: 0; }
.main .stepSection.on .stepList > li:nth-child(1){ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .stepSection.on .stepList > li:nth-child(2){ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }
.main .stepSection.on .stepList > li:nth-child(3){ animation: fadeIn 0.7s ease-in-out 0.2s 1 forwards running; }
.main .stepSection.on .stepList > li:nth-child(4){ animation: fadeIn 0.7s ease-in-out 0.3s 1 forwards running; }

.main .stepSection .stepCenterTitle{ opacity: 0; }
.main .stepSection.on .stepCenterTitle{ animation: fadeIn 0.7s ease-in-out 0.4s 1 forwards running; }
.main .stepSection .itemList > li{ opacity: 0; }
.main .stepSection.on .itemList > li:nth-child(1){ animation: fadeIn 0.7s ease-in-out 0.5s 1 forwards running; }
.main .stepSection.on .itemList > li:nth-child(2){ animation: fadeIn 0.7s ease-in-out 0.6s 1 forwards running; }
.main .stepSection.on .itemList > li:nth-child(3){ animation: fadeIn 0.7s ease-in-out 0.7s 1 forwards running; }

.main .stepSection .halfBox1{ opacity: 0; }
.main .stepSection .halfBox1.on{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }

.main .stepSection .drainTitle{ opacity: 0; }
.main .stepSection .drainTitle.on{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running, textColor 2s ease-in-out infinite; }
.main .stepSection .mapList > li{ opacity: 0; }
.main .stepSection .mapList.on > li:nth-child(1){ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }
.main .stepSection .mapList.on > li:nth-child(2){ animation: fadeIn 0.7s ease-in-out 0.2s 1 forwards running; }
.main .stepSection .mapList.on > li:nth-child(3){ animation: fadeIn 0.7s ease-in-out 0.3s 1 forwards running; }

.main .stepSection .blackBox{ opacity: 0; }
.main .stepSection .blackBox.on{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }

.main .reviewSection .reviewBox{ opacity: 0; }
.main .reviewSection.on .reviewBox{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }

.main .priceSection .tableBox{ opacity: 0; }
.main .priceSection.on .tableBox{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }
.main .priceSection .halfBox{ opacity: 0; }
.main .priceSection.on .halfBox{ animation: fadeIn 0.7s ease-in-out 0.2s 1 forwards running; }

.main .qnaSection .quaList{ opacity: 0; }
.main .qnaSection.on .quaList{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }


.main .applySection .applyTitle{ opacity: 0; } 
.main .applySection.on .applyTitle{ animation: fadeIn 0.7s ease-in-out 0s 1 forwards running; }
.main .applySection .applyContent{ opacity: 0; }
.main .applySection.on .applyContent{ animation: fadeIn 0.7s ease-in-out 0.1s 1 forwards running; }

.main .applySection .applyWrap{ opacity: 0; }
.main .applySection.on .applyWrap{ animation: fadeIn 0.7s ease-in-out 0.2s 1 forwards running; }

.bottomApplySection .iptDiv .bubble{ animation: float 2s ease-in-out infinite; }



@keyframes fadeIn {
    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); }
}
@keyframes scale {
    0% { opacity: 1; transform: scale(.2); }
    100% { opacity: 0; transform: scale(1); }
}
@keyframes textColor {
    0% { color: #004099; }
    50% { color: #222; }
    100% { color: #004099; }
}

@keyframes showHide {
    0%, 100% { opacity: 0; } 
    50% { opacity: 1; } 
}
@keyframes bigtosmall {
    0% { opacity: 0; transform: scale(2) rotate(30deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}